1、利用事件总线的方式实现兄弟组件通信
在构造函数Vue的原型身上添加一个$bus属性 属性的值是Vue的实例化对象
事件总线事件不局限于兄弟组件传值总的特征 、先监听自定义事件 再发送自定义事件，频繁使用 会显得浪费性能
main.js文件
Vue.prototype.$bus=new Vue();
childA
<h1 @click="send">我是childA</h1>
methods:{
/* 利用事件总线的方式实现兄弟传值 */
send(){
()里面代表注册事件，传过去的值
this.$bus.$emit('childV','成功实现兄弟传值')
}
}
childB
<h2>ChildB:{{childVStr}}</h2>
data(){
return {
childVStr:'我是弟弟'
}
},
created(){
兄弟组件通信 需要使用$on方法 值用回调函数接收
this.$bus.$on('childV',v=>{
console.log('v是childA传过来的')
this.childVStr=v;
})
}
2、ref 的用法
/* $refs方法操作于原生DOM可以获取原生DOM元素 */
/* 使用this.$children也可以获取子组件的属性和方法 */
<h2 ref="haha">{{ msg }}</h2>
<button @click="fn">获取原生dom，修改dom内容，获取最新dom内容</button>
data(){
return{{
msg:'我爱taotao'
}
}
/*this.$nextTick() 及时更新数据，而直接log出来的是原来的值*/
fn() {
this.msg = "成功获取原生DOM内容 我爱张sir";
this.$nextTick(() => {
console.log(this.$refs.haha.innerHTML);
});
}
3、利用.sync语法糖实现父子通信(父传子，子改父)
父组件
<ChildB :cmsg.sync="msg" />
msg: "我是父组件的人"
子组件
<h2 @click="change">{{cmsg}}</h2>
使用props接受父组件cmsg.sync传过来的值
props:['cmsg']
methods:{
改父组件的值，可以使用$emit('update:(sync过来的值)', { })
change(){
this.$emit('update:cmsg'，'.sync的方法子改父')
}
}
