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訪問到其值。逆戰班