Vue组件之间通信

      Vue做开发项目时经常用到组件的互相调用, 组件调用如何函数调用一样，相当方便，同时也相当频繁。
     这里介绍常用的三种组件通信的方式。
     一、 父组件向子组件传数据,这种情况多用于由父组件收集获取数据，传递给子组件，子组件根据数据形成相应的展示样式。
      举例:  parent.vue
     

点击(此处)折叠或打开

1. <children :data='mess'></children>    对子组件的引用,将数据mess传输给子组件children中的data变量
   
2.     
   
3.     data() {
   
4.         return {
   
5.             mess: {
   
6.                 'label': 'label',
   
7.                 'value': 'value'
   
8.             }
   
9.         }
   
10.     }

         children.vue  
       

点击(此处)折叠或打开

1. children.vue               
2.    {{ mess.label }}
3.    {{ mess.value }}            
   
4.      
   
5.     props : {
   
6.         data: {                         定义接受数据 data的数据类型和默认值  接收值都定义在props
   
7.             type: Object,
   
8.             default: {
   
9.                 'label': 'label1',
   
10.                 'value': 'value1',
    
11.             }
    
12.         }
    
13.     }

   

    二、子组件向父组件传数据，通过触发事件向父组件发送数据,多用于检索,查询
       parent.vue
       

点击(此处)折叠或打开

1. <children @childrenclickQuery=ParentclickQuery></children>       父组件调用子组件,定义ParentclickQuery函数
   
2. 
   
3.     ParentclickQuery(data) {
   
4.         this.msg = data            // data就是子组件传递的数据 data = {'label': 'label','value': 'value'}
   
5.     }

     children.vue 

   

点击(此处)折叠或打开

1. children.vue
   
2. 
   
3.     <button @keyup.enter.native=clickQuery>传递参数</button>      定义按钮事件名为 clickQuery
   
4.     
   
5.     data() {
   
6.         return {
   
7.             msg: {
   
8.                 'label': 'label',
   
9.                 'value': 'value'
   
10.             }
    
11.         }
    
12.     }
    
13.     clickQuery() {
    
14.         this.$emit('childrenclickQuery', this.msg) // 触发当前组件事件,并传递参数, 触发父组件中的 childrenclickQuery事件,同时为事件传递参数，父组件中通过事件接受参数   
    
15.     }

    三、兄弟组件之间传参数, 当组件之间互不调用，但是却要传参数的情况, 一般多在两个组件同属一个父组件
    
    原理:   通过第三方实, 组件接收方开启监听事件,组件发送方触发事件，触发时带上参数。必须同一个vue实例才能进行监听和触发。
   
    这时候需要实例化一个三方vue实例进行传输   let vm = new Vue()
   
    传数据组件方

点击(此处)折叠或打开

1. <button @click=ge></button>   // 
   
2. 
   
3. methods: {
   
4.     ge() {
   
5.         vm.$emit('blur','messages1') // 组件触发     触发blur事件,带上参数messages1
   
6.     }
   
7. }

   接受数据组件
    

点击(此处)折叠或打开

1. 
   
2. created() {
   
3.     vm.$on('blur',(arg) => {        // 新建一个监听事件   blur,接受一个参数args并获取, 必须在事件触发前开启监听,这里放在实例创建时启动监听
   
4.         this.test = arg             // arg 就是  messages1
   
5.     })
   
6. }

   以上就是vue常用的三种组件之间通信的情况。