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