文档章节

vue组件之间通信的8种方式

o
 osc_y8yehimr
发布于 2019/03/20 17:54
字数 1611
阅读 3
收藏 0

精选30+云产品,助力企业轻松上云!>>>

对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结。

  • props和$emit(常用)
  • $attrs和$listeners
  • 中央事件总线(非父子组件间通信)
  • v-model
  • provide和inject
  • $parent和$children
  • vuex

1.props和$emit

   父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的.

 1 Vue.component('child',{
 2     data(){
 3       return {
 4         mymessage:this.message
 5       }
 6     },
 7     template:`
 8       <div>
 9         <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>
10     `,
11     props:['message'],//设置props属性值,得到父组件传递过来的数据
12     methods:{
13       passData(val){
14         //触发父组件中的事件,向父组件传值
15         this.$emit('getChildData',val)
16       }
17     }
18   })
19   Vue.component('parent',{
20     template:`
21       <div>
22         <p>this is parent compoent!</p>
23         <child :message="message" v-on:getChildData="getChildData"></child>
24       </div>
25     `,
26     data(){
27       return {
28         message:'hello'
29       }
30     },
31     methods:{
32       //执行子组件触发的事件
33       getChildData(val){
34         console.log(val)
35       }
36     }
37   })

 

 在上面的例子中,有父组件parent和子组件child。

  1).父组件传递了message数据给子组件,并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件;

  2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件

2.$attrs和$listeners

  第一种方式处理父子组件之间的数据传输有一个问题:如果父组件A下面有子组件B,组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢? 如果采用第一种方法,我们必须让组件A通过prop传递消息给组件B,组件B在通过prop传递消息给组件C;要是组件A和组件C之间有更多的组件,那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题,能够让组件A之间传递消息给组件C。

 1 Vue.component('C',{
 2     template:`
 3       <div>
 4         <input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
 5     `,
 6     methods:{
 7       passCData(val){
 8         //触发父组件A中的事件
 9         this.$emit('getCData',val)
10       }
11     }
12   })
13   Vue.component('B',{
14     data(){
15       return {
16         mymessage:this.message
17       }
18     },
19     template:`
20       <div>
21         <input type="text" v-model="mymessage" @input="passData(mymessage)">
22         <!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
23         <!-- 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) -->
24         <C v-bind="$attrs" v-on="$listeners"></C>
25       </div>
26     `,
27     props:['message'],//得到父组件传递过来的数据
28     methods:{
29       passData(val){
30         //触发父组件中的事件
31         this.$emit('getChildData',val)
32       }
33     }
34   })
35   Vue.component('A',{
36     template:`
37       <div>
38         <p>this is parent compoent!</p>
39         <B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
40       </div>
41     `,
42     data(){
43       return {
44         message:'hello',
45         messagec:'hello c' //传递给c组件的数据
46       }
47     },
48     methods:{
49       getChildData(val){
50         console.log('这是来自B组件的数据')
51       },
52       //执行C子组件触发的事件
53       getCData(val){
54         console.log("这是来自C组件的数据:"+val)
55       }
56     }
57   })

 3. 中央事件总线

上面两种方式处理的都是父子组件之间的数据传递,而如果两个组件不是父子关系呢?这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象,然后通过bus.$emit触发事件,bus.$on监听触发的事件。

Vue.component('brother1',{
    data(){
      return {
        mymessage:'hello brother1'
      }
    },
    template:`
      <div>
        <p>this is brother1 compoent!</p>
        <input type="text" v-model="mymessage" @input="passData(mymessage)">
      </div>
    `,
    methods:{
      passData(val){
        //触发全局事件globalEvent
        bus.$emit('globalEvent',val)
      }
    }
  })
  Vue.component('brother2',{
    template:`
      <div>
        <p>this is brother2 compoent!</p>
        <p>brother1传递过来的数据:{{brothermessage}}</p>
      </div>
    `,
    data(){
      return {
        mymessage:'hello brother2',
        brothermessage:''
      }
    },
    mounted(){
      //绑定全局事件globalEvent
      bus.$on('globalEvent',(val)=>{
        this.brothermessage=val;
      })
    }
  })
  //中央事件总线
  var bus=new Vue();
  var app=new Vue({
    el:'#app',
    template:`
      <div>
        <brother1></brother1>
        <brother2></brother2>
      </div>
    `
  })

4. provide和inject

  在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现,用于父级组件向下传递数据。

父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。

 1 Vue.component('child',{
 2     inject:['for'],//得到父组件传递过来的数据
 3     data(){
 4       return {
 5         mymessage:this.for
 6       }
 7     },
 8     template:`
 9       <div>
10         <input type="tet" v-model="mymessage">
11       </div>
12   })
13   Vue.component('parent',{
14     template:`
15       <div>
16         <p>this is parent compoent!</p>
17         <child></child>
18       </div>
19     `,
20     provide:{
21       for:'test'
22     },
23     data(){
24       return {
25         message:'hello'
26       }
27     }
28   })

 

5. v-model

  父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值

Vue.component('child',{
    props:{
      value:String, //v-model会自动传递一个字段为value的prop属性
    },
    data(){
      return {
        mymessage:this.value
      }
    },
    methods:{
      changeValue(){
        this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
      }
    },
    template:`
      <div>
        <input type="text" v-model="mymessage" @change="changeValue">
      </div>
  })
  Vue.component('parent',{
    template:`
      <div>
        <p>this is parent compoent!</p>
        <p>{{message}}</p>
        <child v-model="message"></child>
      </div>
    `,
    data(){
      return {
        message:'hello'
      }
    }
  })
  var app=new Vue({
    el:'#app',
    template:`
      <div>
        <parent></parent>
      </div>
    `
  })

 

 6. $parent和$children

      在组件内部可以直接通过子组件$parent对父组件进行操作,父组件通过$children对子组件进行操作.

Vue.component('child',{
    props:{
      value:String, //v-model会自动传递一个字段为value的prop属性
    },
    data(){
      return {
        mymessage:this.value
      }
    },
    methods:{
      changeValue(){
        this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
      }
    },
    template:`
      <div>
        <input type="text" v-model="mymessage" @change="changeValue">
      </div>
  })
  Vue.component('parent',{
    template:`
      <div>
        <p>this is parent compoent!</p>
        <button @click="changeChildValue">test</button >
        <child></child>
      </div>
    `,
    methods:{
      changeChildValue(){
        this.$children[0].mymessage = 'hello';
      }
    },
    data(){
      return {
        message:'hello'
      }
    }
  })
  var app=new Vue({
    el:'#app',
    template:`
      <div>
        <parent></parent>
      </div>
    `
  })

7. vuex处理组件之间的数据交互

如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候才有上面这一些方法可能不利于项目的维护,vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。

 参考链接:https://my.oschina.net/u/3982182/blog/3019264

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue-常见的组件通信方式

前言 最近一直在从头开始学习vue,顺手整理一下vue组件化的相关通信方式,分析不到之处,还望各位指正。 组件化 vue组件系统提供了⼀种抽象,让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤,...

Leo_老莫
06/01
0
0
SpringBoot 处理异常的几种常见姿势

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方...

小豆豆123
2019/10/11
6
0
深度解析vue组件之间通信【8种方式】实例

这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有...

前端攻城小牛
2019/03/07
2K
4
vue中8种组件通信方式, 值得收藏!

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方...

osc_1loi8uc4
06/30
2
0
vue中8种组件通信方式, 值得收藏!

之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要...

大西轰已在服务区
2019/07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深入浅出Zabbix 3.0 -- 第二章 Zabbix Web操作与定义

第二章 Zabbix Web操作与定义 本章介绍Zabbix 中一些基本概念的定义和web前端页面的操作,包括Zabbix中使用的一些术语的定义,Web页面中用户管理、主机和主机组的管理,以及监控项、模板、触...

osc_5zaxkz1e
25分钟前
14
0
深入浅出Zabbix 3.0 -- 第一章 Zabbix 安装与配置

第一章 Zabbix 安装与配置 1.1 Zabbix 介绍 Zabbix是一个企业级的开源监控软件,可以监控IT基础架构的可用性和应用的性能,为用户提供集中管理、分布式监控的一站式(all in one)监控解决方...

osc_nvkeo9cj
26分钟前
10
0
PHP 实现抽奖逻辑

public static function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 forea......

chenhongjiang
26分钟前
18
0
struts2 上传 下载

东方部落: http://11144439.blog.51cto.com struts中上传文件功能小测试。这里jar是 2.5 版本。 项目结构图 废话不多说,直接代码。 2. web.xml配置 <?xml version="1.0" encoding="UTF-8......

osc_1qix3fyb
28分钟前
31
0
SVN管理系统安装及其操作

SVN管理系统安装及操作 防伪码:学习永远不晚! 前言: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS、CVS,它采用了分支管理系统,它的设计目标就是取代CVS。互联网上...

osc_afifi2qt
29分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部