vue父子组件通信高级用法

标签: 通信 vue.js javascript | 发表时间:2019-08-27 10:52 | 作者:我的小熊不见了
出处:https://segmentfault.com/blogs

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

子通信父

父组件

  <template>
  <div class="parent">
    我是父组件
    <!--父组件监听子组件触发的say方法,调用自己的parentSay方法-->
    <!--通过:msg将父组件的数据传递给子组件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      // 参数就是子组件传递出来的数据
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

子组件

  <template>
  <div class="hello">
    <div class="children" @click="say">
      我是子组件
      <div>
        父组件对我说:{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

子组件使用$emit方法调用父组件的方法,达到子通信父的目的。

父通信子

父组件

   <!--Html-->
<template>
   <!--父组件触发click方法-->
  <div class="parent" @click="say">
    我是父组件
    <!--通过ref标记子组件-->
    <children ref="child"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
        msg: "hello,my son"
    }
  },
  methods: {
      // 通过$refs调用子组件的parentSay方法
      say(){
         this.$refs.child.parentSay(this.msg);
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

子组件

  <template>
  <div class="hello">
    <div class="children" >
      我是子组件
      <div>
        父组件对我说:{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            msg: ''
        }
      },

      methods: {
          // 父组件调用的JavaScript方法parentSay
          parentSay(msg){
              this.msg = msg;
          }
      }
  }
</script>

父组件通过 $refs调用子组件的方法。
以上就是父子组件通信的方式,父子组件传递数据直接用props,或者使用 $emit$refs依靠事件来传递数据。

父子组件通信提升篇

上文中,子通信父是在 子中触发点击事件然后调用父组件的方法,父通信子是在 父中触发点击事件调用子组件的方法。但是实际情况中可能存在 子通信父时子组件不允许有点击事件而事件在父中或者 父通信子时点击事件在子组件中。

子通信父时击事件在父组件

这种情况其实很常见,例如提交一个表单时表单的内容为子组件,而保存按钮在父组件上。此时点击保存按钮想要获取子组件表单的值。这种情况下已经不单单是子通信父和父通信子了,需要将两者结合在一起使用才能完成整个通信过程。

实现的思路是在父组件中点击事件时,先通过父子通信调用子组件的方法,然后在子组件中的该方法里使用子父通信调用父组件的另一个方法并将信息传递回来。以下是代码演示:

父组件

  <template>
  <div class="parent" @click="getData">
    我是父组件
    <!--父组件监听子组件触发的transData方法,调用自己的transData方法-->
    <!--通过ref标记子组件-->
    <children ref="child" @transData="transData"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      getData(){
          // 调用子组件的getData方法
          this.$refs.child.getData();
      },
      // 参数就是子组件传递出来的数据
      transData(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

子组件

  <template>
  <div class="hello">
    <div class="children" >
      我是子组件
      <div>
        子组件的数据:{{childrenSay}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },
      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
          getData() {
              this.$emit('transData' , this.childrenSay);
          }
      }
  }
</script>

另一种情况思路也和这个一样,基础就在与父通信子和子通信父的灵活运用。
转评赞就是最大的鼓励

相关 [vue 父子 通信] 推荐:

vue父子组件通信高级用法

- - SegmentFault 最新的文章
vue项目的一大亮点就是组件化. 使用组件可以极大地提高项目中代码的复用率,减少代码量. 但是使用组件最大的难点就是父子组件之间的通信. . . // 参数就是子组件传递出来的数据.

Vue 组件数据通信方案总结

- - IT瘾-dev
(给前端大全加星标,提升前端技能). 作者:政采云前端团队 公号 / 季节 (本文来自作者投稿). 初识 Vue.js ,了解到组件是 Vue 的主要构成部分,但组件内部的作用域是相对独立的部分,组件之间的关系一般如下图:. 组件 A 与组件 B 、C 之间是父子组件,组件 B 、C 之间是兄弟组件,而组件 A 、D 之间是隔代的关系.

ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering

- -
This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.

Vue 移动端框架

- - IT瘾-jianshu
vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档| github地址| 在线预览. vux 基于WeUI和Vue(2.x)开发的移动端UI组件库. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式.

vue路由权限校验

- - 掘金前端
做后台系统的时候,难免会有用户权限的判断. admin可以查看全部菜单,user只能查看部分菜单. 一开始接触这个需求的时候,完全是纯前端做的. 在配置路由的时候,加一个roles的属性,通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据. // 过滤路由 menuList-菜单 roles-用户角色 const checkMenuList = (menuList, roles) => { for (let i = 0; i < menuList.length; i++) {.

父子页面之间跨域通信的方法

- - TID-财付通设计中心
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案. 之前也有小网同学分享过一篇“ 跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题:.

微豆 - Vue 2.0 实现豆瓣 Web App 教程

- - SegmentFault 最新的文章
一个使用 Vue.js 与 Material Design 重构 豆瓣 的项目. 项目网站 http://vdo.ralfz.com/. # 克隆项目到本地 git clone https://github.com/RalfZhang/Vdo.git # 安装依赖 npm install # 在 localhost:8080 启动项目 npm run dev.

浅谈Vue组件在实际项目中的应用

- - JDC | 京东设计中心
Vue.js 是一套构建用户界面的渐进式框架,目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 虽然目前 Vue 已经很火了,但不可否认的是,仍有很多人刚刚开始学习使用 Vue 来构建前端项目,从生疏的初学者到熟练运用 Vue 的过程中,不可避免地会走一些弯路. 为了实现某个功能,也许尝试过很多方法,最终蓦然回首,才发现当初犯下的错误是那么幼稚.

vue快速入门的三个小实例

- - SegmentFault 最新的文章
用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下 webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章,这是第一篇,其它几篇文章链接就不贴了). 但是关于vue入门基础的文章,我还没有写过,那么今天就写vue入门的三个小实例,这三个小实例是我刚接触vue的时候的练手作品,难度从很简单到简单,都是入门级的.

vue 文件多了, webpack 热加载很慢? - V2EX

- -
点我最近刚好在看 webpack,如果楼主时间多可以去我博客看一下 webpack 相关的三篇文章,不要脸的放一下博客. 如果时间不够只是想解决这个问题,那么我尝试正儿八经回答一下. 1.把 webpack 升级到 4.0. 3.使用 DLLplugin,happypack 等构建加速插件. 4.检查 loader/eslint 是否配置错误 /不合理.