vue组件通信详解
vue组件通信详解。
在使用vue开发的时候，组件是必不可少的一个环节，既然用到了组件，一定会有需要组件通信的时候，今天就来捡一捡组件通信的东西！
vue组件通讯的方式有：父传子通信，子传父通信，bus中央事件总线，ref通信。
1、父传子通信。
<div id="box">
<div class="parent" >
我是父组件
<child title="are you ok?"></child>
</div>
</div>
<script>
Vue.component("child",{
template : `
我是孩子组件{
{title}}
`,
props : ["title"]
})
var vm = new Vue({
el : "#box",
data : {
}
})
这里title就是父组件想要传给子组件的内容，子组件child只需要在属性props中写上title，即可获取父组件传过来的信息。
页面效果图：
2、子传父通信。
子传父通信相对于父传子来说，稍显复杂。不过都是小问题啦！
<div id="box">
<div class="parent">
我是父组件
<child @event="handleEvent"></child>
</div>
</div>
<script>
Vue.component("child",{
template : `
我是孩子组件
`,
mounted() {
this.$emit("event","are you ok?")
},
})
var vm = new Vue({
el : "#box",
methods: {
handleEvent(data){
console.log(data)
}
},
})
</script>
这里注意，event是一个自定义监听的事件。在子组件被创建好之后，就去监听一个自定义event事件。其次，在子组件的mounted生命周期中，进行emit 触发该事件。触发了event事件后，就去执行handleEvent函数，这样就达到了从子组件发信息给父组件了！这里还有一点要注意，就是handleEvent函数没加括号，而在methods中的handleEvent却得到了数据data。这里可以理解为vue会自动将data入。如果要加括号，必须在括号里加上$event。
页面截图：
3、bus中央事件通信模式。
<div id="box">
<div class="parent">
我是父组件
<child ></child>
</div>
</div>
<script>
var bus = new Vue()
Vue.component("child",{
template : `
我是孩子组件
`,
mounted() {
bus.$emit("event","are you ok?")
},
})
var vm = new Vue({
el : "#box",
beforeMount() {
bus.$on("event",data => {
console.log(data)
})
}
})
</script>
bus通信尤为简单，原理就是新实例化一个vue对象bus，将其作为中间件，子组件向bus的event事件发送信息，父组件监听bus中的event事件。在通过父传子，子传父层级较多时，可以考虑这种模式。
页面效果：
4、ref 通信
ref是一种比较暴力的通信方式。
<div id="box">
我是父组件<input type="text" ref="title" value="are you ok">
<child></child>
</div>
<script>
Vue.component("child",{
template : `
我是孩子组件
`,
})
var vm = new Vue({
el : "#box",
data : {
},
mounted() {
console.log(this.$refs)
},
})
</script>
只要加了ref属性，都可以通过this.$refs访问到其值。逆战班