淺入深出Vue：子元件與資料傳遞

若羽。發表於2019-07-10
Vue元件

上一篇瞭解了元件的概念及在使用中需要注意的地方。在面對單個元件邏輯複雜需要拆分時，難免會遇到父子元件之間資料傳遞的問題。那麼我們來了解一下在父子元件之間進行資料傳遞時需要遵循哪些約定，以及要注意哪些問題。

如何傳遞

父元件向子元件在進行傳遞時，使用的是 prop特性進行傳遞。

約定

老規矩， 在使用前我們首先了解應該怎麼使用，有哪些約束條件：

  1. 子元件的 props中定義要傳遞的變數名

  2. 變數名同元件的命名規範

  3. 父元件傳值時，需要使用短橫線分隔命名

  4. 使用 v-bind進行傳值

定義

首先在子元件中定義：

// Child.vue

export default {
    name: 'child'
    props: ['teamList']
}

這裡使用了駝峰命名，在傳值時需注意要轉換成短橫線分隔命名。

我們定義了一個 teamList的變數，此時我們就可以在這個元件中通過 this使用這個變數了（同 data中的資料）。

傳值

在父元件中進行傳值：

<template>
    <div>
        <child v-bind:teamList="teamList"></child>
    </div>
</template>

父元件中使用 v-bind即可將資料傳遞下去了。

向子元件傳遞資料就是這麼簡單，本質上和 data一樣，只是這裡單獨使用 prop特性將其區分開來。

需要注意的時：

  • 通過 prop特性傳遞下去的陣列是 “單向”繫結的，父元件對陣列的更新會影響到子元件。因此並不建議子元件對 prop特性中的值進行修改

Js中在傳遞物件和陣列時傳遞的時引用！因此：當子元件修改父元件傳遞下來的物件/陣列時會影響到父元件中的狀態

這個特性有利有弊，在某些情況下可以通過這種類似 hack的方式來進行處理。

子元件反向傳遞

上面說到了，並不建議在子元件中修改 props中的資料。那麼當需要向父元件進行某種反饋時怎麼辦呢？

假設現在我們有一個登入彈出框的元件，通過子元件的方式呼叫了，當我們登入成功時該如何通知父元件做出相應的反應呢？

  1. 通過自定義事件，子元件呼叫 this.$emit('事件名', 引數)

  2. 使用 v-model 、元件中 model選項與 input事件模擬成 input控制元件，對父元件中的值進行更新

  3. .sync修飾符進行 “雙向繫結”

這裡只介紹第一種方式，因為後兩種方式若羽也沒用過幾次 o(╯□╰)o

emit使用約定

  • 事件名的命名規範同元件

  • 父元件在繫結子元件上的自定義事件時，必須完全匹配事件名，這裡不像元件與子元件中使用時是使用的短橫線分隔命名，而是完全匹配。

約定較少，主要注意使用時是和元件不同的，名稱需要完全匹配。

emit使用

首先我們在子元件中定義事件,說是定義，不如說是呼叫。因為是子元件直接在某段邏輯中呼叫的emit：

// child.vue

export default {
    methods: {
        submit() {
            this.$emit('submitForm', this.data)
        }
    }
}

這裡我們定義了呼叫的自定義事件名稱為 submitForm，那麼在父元件中使用：

<!-- parent.vue -->

<template>
    <div>
        <child v-on:submitForm="submit"></child>
    </div>
</template>

<script>
export default {
    methods: {
        submit(data) {
            // 處理邏輯
        }
    }
}
</script>

可以看到這裡在使用時， v-on繫結的事件名稱是 submitForm而不是 submit-form。

這一點需要注意。

寫在後面

這一篇內容較少，因為接下來的入門篇將會用專案實踐來更好的演示它們的用法。同時，初學之時也不太建議在用法多樣性上關注太多。

在實踐中學習、成長

相關文章