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 : `
                <div>我是孩子组件{{title}}</div>
            `,
            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 : `
                <div>我是孩子组件</div>
            `,
            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 : `
                <div>我是孩子组件</div>
            `,
            
            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 : `
                <div>我是孩子组件
                    
                </div>
            `,
           
        })
        var vm = new Vue({
            el : "#box",
            data : {

            },
            mounted() {
                console.log(this.$refs)
            },
        })    
    </script>

只要加了ref属性，都可以通过this.$refs访问到其值。逆战班