vue组件之间的传值，通讯

vue组件之间的传值，通讯

vue组件之间的传值

一.父传子：

二.子传父：

三.兄弟传兄弟：


四.兄弟传兄弟或者两个没有关系的组件传值还有一种方法：
自定义事件

1》兄弟A组件：

<input type = "text" v-model="title">
<button @click="addTitle" >add</button>

data(){
   title=''
},
methods：{
    addTitle(){
    //点击按钮调用自定义事件
    event.$emit('onAddTitle',this.title)
    }
}

2》兄弟B组件：

data(){
     methods:{
        add(title){
           console.log('shuchu',title);//title 父传子得到
           //title就是兄弟A组件的
           //event.$emit('onAddTitle',this.title)
           //里面的this.title
        }
     }
},
mounted():{
     //兄弟A调用了onAddTitle自定义事件，这时候兄弟B会触发onAddTitle事件
     //即add函数
     event.$on('onAddTitle',this.add)
}

3》event是什么？本质其实是一个vue实例

import event from '/event.js';//在兄弟A，B组件引入

event.js：

4》兄弟A组件 绑定事件函数$on的第二个参数为什么是this.add而不是function，是为了方便解绑