组件通讯
一、组件：组件是可复用的 Vue 实例
二、创建组件：
1.全局组件
Vue.component('my-component-name', {
// ... 选项 ...
})
例如：
import Vue from 'vue';
//定义一个全局组件
Vue.component('myCom1',{
template:"<div>我是组件{{ count }} <button @click='go'>click</button></div>",
data() {
return {
count:100
}
},
methods:{
go() {
console.log('我是组件1的go方法');
}
}
});
2.局部组件
var ComponentA = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
}
三、组件通讯
父传子:
1.创建两个组件A.vue和B.vue，并在A.vue中引入B.vue，并注册
2.在A.vue引入的子组件自身添加要传递的属性
例如： <my-com1 :yonghu="user" :dizhi="address" :age="age"></my-com1>
3.在B组件中接收A.vue组件中传递过来的值，通过props接收
具体props有两种写法：数组和对象（带验证）
例如：
export default {
// props:['yonghu','dizhi','age'],
props:{
'yonghu':{
type:[String]
},
'dizhi':{
type:String
},
'age':{
type:Number,
default:0
}
},
子传父：主要通过事件派发实现，具体通过$emit实现
派发事件：$emit()
接收事件：@事件名戒v-on
1、子组件定义事件click、change……
2、在事件中$emit派发事件，及传的参数
3、在父组件中的子组件标签上 @派发的事件名：定义的事件名，在定义的事件中有一个形参数 ，就是传的参数
function 定义的事件名（res）{
console.log(res)
}
兄弟之间：（即非父子）
1. Event Bus:通过一个空的vue（即桥梁）实现兄弟之间数据传递
第一步：创建两个兄弟组件并引入到其他组件中 例如：son1,son2
第二步：创建一个空的vue 例如：bus.js
第三步：分别在两个兄弟组件中引入bus.js
第四步：例如：son1数据发送给son2,在son1通过触发一个事件响应来派发
import Bus from '@/components/common/bus';
<button @click="goToSon2">向son2发送数据</button>
methods:{
goToSon2() {
// 派发事件
Bus.$emit('ok',this.msg)
}
第五步：在生命周期钩子上监听son1派发过来的事件 $on
created(){
//监听事件
Bus.$on('ok',(v)=>{
// console.log(v);
this.name=v;
})
}
