标签：观察 地方 观察者模式 OLE hang key 使用 theme containe
//父组件
<body>
<div id=‘app1‘>
<!-- 在tp1组件标签上使用 xixi自定义属性 -->
<tp1 :xixi=‘change‘></tp1>
</div>
<script>
let vm1 = new Vue({
el:‘#app1‘,
data:{
change:‘nihao‘
}
})
</script>
//子组件
<template id=‘tp1‘>
<div class=‘tp1‘>
这里是组件
{{xixi}}
</div>
</template>
<script>
Vue.component(‘tp1‘,{
template:‘#tp1‘,
props:[‘xixi‘]
})
</script>
<body>
<div id=‘app1‘>
<!-- 绑定在son身上的自定义事件 事件名叫 custom 处理函数叫add -->
<son @hehe=‘change‘></son>
//这里是子组件
<template id=‘tp1‘>
<div>
<button @click=‘sonClick‘> 这里是子组件的按钮</button>
</div>
</template>
</body>
<script>
Vue.component(‘son‘,{
template:‘#tp1‘,
methods: {
sonClick(){
console.log(‘子组件的处理方法‘)
// 通过emit方法触发自定义事件 参数1 自定义事件名
this.$emit(‘hehe‘,666)
}
},
})
//实例：
let vm1 = new Vue({
el:‘#app1‘,
methods: {
change(num){
alert(‘点到我了‘+num)
}
},
})
原理：
1. 创建一个空实例 作为桥梁2. 通过 $on 在空实例上注册事件3. 在任何地方 只要能获取到空实例 那就可以通过 $emit 方法触发事件
步骤：
2个组件 兄弟关系 1个的按钮控制另一个div的显示隐藏1. 组件二：找到发生改变的组件 添加改变事件和数据关联组件里的数据只有自己的方法可以修改2. 组件1：通过button来进行控制
标签：观察 地方 观察者模式 OLE hang key 使用 theme containe
原文地址：https://www.cnblogs.com/miaomiaoblog/p/12387574.html
