Vue.js 元件之間傳遞資料

linshuai發表於2017-07-11
Vue.js元件

前言

元件是 vue.js 最強大的功能之一，而元件例項的作用域是相互獨立的，這就意味著不同元件之間的資料無法相互引用。如何傳遞資料也成了元件的重要知識點之一。

元件

元件與元件之間，還存在著不同的關係。父子關係與兄弟關係（不是父子的都暫稱為兄弟吧）。

父子元件

父子關係即是元件 A 在它的模板中使用了元件 B，那麼元件 A 就是父元件，元件 B 就是子元件。

// 註冊一個子元件
Vue.component('child', {
    data: function(){
        text: '我是father的子元件！'
    }
    template: '<span>{{ text }}</span>'
})
// 註冊一個父元件
Vue.component('father', {
    template: '<div><child></child></div>'  // 在模板中使用了child元件
})複製程式碼

直接使用 father 元件的時候：

<div id="app">
    <father></father>
</div>複製程式碼

頁面中就會渲染出 ：我是father的子元件！

father 元件在模板中使用了 child 元件，所以它就是父元件，child 元件被使用，所以 child 元件就是子元件。

兄弟元件

兩個元件互不引用，則為兄弟元件。

Vue.component('brother1', {
    template: '<div>我是大哥</div>'
})
Vue.component('brother2', {
    template: '<div>我是小弟</div>'
})複製程式碼

使用元件的時候：

<div id="app">
    <brother1></brother1>
    <brother2></brother2>
</div>複製程式碼

頁面中就會渲染出 ：

我是大哥

我是小弟

Prop

子元件想要使用父元件的資料，我們需要通過子元件的 props 選項來獲得父元件傳過來的資料。以下我使用在 .vue 檔案中的格式來寫例子。

如何傳遞資料

在父元件 father.vue 中引用子元件 child.vue，把 name 的值傳給 child 元件。

<template>
    <div class="app">
        // message 定義在子元件的 props 中
        <child :message="name"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                name: 'linxin'
            }
        }
    }
</script>複製程式碼

在子元件 child.vue 中的 props 選項中宣告它期待獲得的資料

<template>
    <span>Hello {{message}}</span>
</template>
<script>
    export default {
        // 在 props 中宣告獲取父元件的資料通過 message 傳過來
        props: ['message']
    }
</script>複製程式碼

那麼頁面中就會渲染出：Hello linxin

單向資料流

當父元件的 name 發生改變，子元件也會自動地更新檢視。但是在子元件中，我們不要去修改 prop。如果你必須要修改到這些資料，你可以使用以下方法：

方法一：把 prop 賦值給一個區域性變數，然後需要修改的話就修改這個區域性變數，而不影響 prop

export default {
    data(){
        newMessage: null  
    },
    props: ['message'],
    created(){
        this.newMessage = this.message;
    }
}複製程式碼

方法二：在計算屬性中對 prop 進行處理

export default {
    props: ['message'],
    computed{
        newMessage(){
            return this.message + ' 哈哈哈';
        }
    }
}複製程式碼

自定義事件

prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。修改子元件的 prop 值，是不會傳回給父元件去更新檢視的。那麼子元件要如何去與父元件通訊呢？

那就是自定義事件。通過在父元件 $on(eventName) 監聽自定義事件，當子元件裡 $emit(eventName) 觸發該自定義事件的時候，父元件執行相應的操作。

比如在父元件中控制一個彈框子元件的顯示，在子元件中按下關閉之後，告訴父元件去隱藏它，然後父元件就執行操作隱藏彈框。

<template>
    <div class="app">
        // hide 為自定義事件，名字可以自己隨便起，不能有大寫字母，可以使用短橫線
        // @hide 監聽子元件觸發 hide 事件，則會執行 hideDialog 方法
        <dialog :is-show="show" @hide="hideDialog"></dialog>
        <button @click="showDialog">顯示彈框</button>
    </div>
</template>
<script>
    import dialog from './dialog.vue';
    export default {
        components: { dialog },
        data() {
            return {
                show: false
            }
        },
        methods: {
            showDialog() {
                this.show = true;
            },
            hideDialog() {
                this.show = false;
            }
        }
    }
</script>複製程式碼

在子元件 dialog.vue 中：

<template>
    <div class="dialog" v-show="isShow">
        <p>這裡是彈框子元件</p>
        <button @click="toHide">關閉彈框</button>
    </div>
</template>
<script>
    export default {
        // 駝峰式命名的 prop 需要轉換為相對應的短橫線隔開式 is-show
        props: ['isShow'],
        methods: {
            toHide(){
                // $emit 方法觸發父元件的監聽事件
                this.$emit('hide');
            }
        }
    }
</script>複製程式碼

這樣就實現了父子元件之間的相互通訊。

Vuex

上面的例子都是建立在父子關係的元件上，但是對於其他層級的關係，實現起來就比較繁瑣了。那麼這時候 Vuex 就能更好的幫你在各個元件間實時通訊了。關於 Vuex，可檢視我的另一篇文章：Vuex 模組化實現待辦事項的狀態管理

總結

元件通訊並不是一定要使用必須要使用 Vuex，對於一些簡單的資料傳遞，prop 也可以完成。本文主要是對元件傳參的一些基礎知識點的記錄，實戰可以參考 notepad 這個例子，使用 prop 實現子元件的顯示與隱藏，使用 vuex 來實現元件間的資料狀態管理。

更多文章：blog

相關文章