vue的父子组件以及非父子组件之间的通信方式
Posted miaomiaoblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的父子组件以及非父子组件之间的通信方式相关的知识，希望对你有一定的参考价值。
Vue组件通信
父传子 prop
自定义属性，将父亲的数据传给儿子
1. 在组件标签上使用自定属性
2. 在组件内部通过props来接收自定义属性
3. 子组件接收后既可以在组件里直接使用，不过只能用不能改
<wiz_code_mirror>
//父组件
<body>
<div id=‘app1‘>
<!-- 在tp1组件标签上使用 xixi自定义属性 -->
<tp1 :xixi=‘change‘></tp1>
</div>
<script>
let vm1 = new Vue({
el:‘#app1‘,
data:{
change:‘nihao‘
}
})
</script>
<wiz_code_mirror>
//子组件
<template id=‘tp1‘>
<div class=‘tp1‘>
这里是组件
{{xixi}}
</div>
</template>
<script>
Vue.component(‘tp1‘,{
template:‘#tp1‘,
props:[‘xixi‘]
})
</script>
子传父 $emit
$emit 可以触发绑定在组件身上自定义事件
1.在父组件中的子组件标签绑定一个自定义事件
<son @custom=‘add‘></son>
2.在子组件的内部 通过$emit 触发这个自定事件
<wiz_code_mirror>
<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来进行控制
以上是关于vue的父子组件以及非父子组件之间的通信方式的主要内容，如果未能解决你的问题，请参考以下文章