vue 組件通信

組件

組件之間的數據是單向綁定的。

父組件向子組件通信

是通過子組件定義的props屬性來實現。通過props定義變數與變數類型和驗證方式。

props簡化定義

在簡化定義中，變數是以數組的方式定義。

Vue.component("test",{
       template:'....',
       props:["變數1","變數2",...]
})

props完整定義

完整定義是採用字面量形式，type 要定義的類型

Vue.component("test",{
    template:'....',
    props:{
        name:String,  // 變數：類型,
        name1:[String,Number] // 多類型：表示可為字元串或數值類型
        name2:{
            type:Array,   // 數組或對象類型 要設置一個預設值。
            default(){
                return [];
            }
        },
        name3:{
            type:String,
            required:true,   // 必傳
        }
        name3:{
            type:String,   
            validator(value){
                //...  自定義數據驗證方式。
            }
        }
    }
})

通信方式

父組件向子組件定義的變數綁定值。

    <p>父組件向子組件傳遞數據count數據，採用v-bind進行數據綁定了，當父組件值變動時子組件也會變。</p>
    <div class="app">
        <input v-model="count">
        <my-component :number="count"></my-component>
    </div>
    <script>
        // 定義子組件
        Vue.component("my-component", {
            props:["number"],
            template:`<span>動態接收：{{number}}</span>`,
        });
        new Vue({
            el: ".app",
            data: {
                count: 0
            }
        });
    </script>

子組件向父組件通信

子組件向父組件通信採用的是自定義事件。$emit與$on。

    <p>子組件向父組件通信採用的是自定義事件。$emit與$on。</p>
    <div class="app">
        {{count}}
        <!-- 相當於設置接收對象 -->
        <my-component @add="getcount"></my-component>
    </div>
    <script>
        // 定義子組件
        Vue.component("my-component", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="test">+1</button>`,
            methods: {
                test() {
                    this.$emit('add', ++this.count);   // 當監聽事件被觸發後，向接收對象傳遞信息，告訴它變化量。
                }
            }

        });
        new Vue({
            el: ".app",
            data: {
                count: 0
            },
            methods:{
                getcount(value){
                    this.count = value;
                }
            }
        });
    </script>

同級組件通信（任意級別組件通信）

採用中央事件匯流排（bus）來實現。就是創建一個空的vue對象，在要接收數據的組件裡面設置$on事件，在要監聽的組件裡面設置$emit.

    <p>同級組件，組件1向組件2傳遞數據。</p>
    <p>當組件+1事件觸發後，向組件2傳遞結果。</p>
    <div class="app">
        <my-component-1></my-component-1>
        <my-component-2></my-component-2>
    </div>
    <script>
        let bus = new Vue();

        // 定義子組件
        Vue.component("my-component-1", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="test">+1</button>`,
            methods: {
                test() {
                    bus.$emit('on-add', ++this.count);
                }
            }

        });

        // 定義子組件
        Vue.component("my-component-2", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<span>{{count}}</span>`,
            mounted() {
                bus.$on("on-add", (vlaue) => {
                    this.count = vlaue
                })
            }
        });
        new Vue({
            el: ".app"
        });
    </script>