Vue组件之间通信

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

<children :data='mess'></children>    对子组件的引用,将数据mess传输给子组件children中的data变量

    data() {
        return {
            mess: {
                'label': 'label',
                'value': 'value'
            }
        }
    }

         children.vue  
       

children.vue
   {{ mess.label }}
   {{ mess.value }}

    props : {
        data: {                         定义接受数据 data的数据类型和默认值  接收值都定义在props
            type: Object,
            default: {
                'label': 'label1',
                'value': 'value1',
            }
        }
    }

   

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

<children  @childrenclickQuery=ParentclickQuery></children>       父组件调用子组件,定义ParentclickQuery函数

    ParentclickQuery(data) {
        this.msg = data            // data就是子组件传递的数据 data = {'label': 'label','value': 'value'}
    }

     children.vue 

   

children.vue

    <button @keyup.enter.native=clickQuery>传递参数</button>      定义按钮事件名为 clickQuery

    data() {
        return {
            msg: {
                'label': 'label',
                'value': 'value'
            }
        }
    }
    clickQuery() {
        this.$emit('childrenclickQuery', this.msg) // 触发当前组件事件,并传递参数, 触发父组件中的 childrenclickQuery事件,同时为事件传递参数，父组件中通过事件接受参数
    }

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

<button @click=ge></button>   //

methods: {
    ge() {
        vm.$emit('blur','messages1') // 组件触发     触发blur事件,带上参数messages1
    }
}

   接受数据组件
    

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

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