一、观察者模式
- 事件发布 : this.$root.eventHub.$emit(事件名称,传递的参数);
- 订阅事件 : this.$root.eventHub.$on(事件名称,(response)=>{ })
- 取消订阅: this.$root.eventHub.$off(事件名称)
二、父子组件的调用
<!--子组件-->
<template>
<div @click="callParentFunction">点击调用子组件方法</div>
<son-component ref="sonModal"></son-component>
</template>
<script>
export default{
data(){
return {
num:1
}
},
methods:{
/**
* 初始化数据
**/
init(){
},
/**
* 调用父组件方法
**/
callParentFunction(){
this.$parent.init();
//给父子属性赋值
this.$parent.testNum =1;
}
}
}
</script>
<!--父组件-->
<template>
<div @click="callSonFunction">点击调用子组件方法</div>
<son-component ref="sonModal"></son-component>
</template>
<script>
export default{
data(){
return {
messageList:[],
testNum:1
}
},
methods:{
/**
* 初始化数据
**/
init(){
this.messageList= [1,2,3];
},
/**
* 调用子组件方法
**/
callSonFunction(){
this.$refs.sonModal.init();
this.$refs.sonModal.num=2;
}
}
}
</script>
三、$children 返回的是一个组件集合 this.$children[i].data 可访问子组件属性