vue組件之間的數據傳遞

最近在整理項目中代碼，在組件之間數據傳遞遇到了問題，因此作了此次總結，若有不對的地方，望指正。

父組件如何將數據傳到子組件中

父組件能夠經過Prop傳遞數據到子組件中。

這裏須要注意的是：

• Prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是反過來不會。這是爲了防止子組件無心間修改了父組件的狀態，來避免應用的數據流變得難以理解。

• 每次父組件更新時，子組件的全部 Prop 都會更新爲最新值。這意味着你不該該在子組件內部改變 prop。若是你這麼作了，Vue 會在控制檯給出警告。

在兩種狀況下，咱們很容易忍不住想去修改 prop 中數據：

• Prop 做爲初始值傳入後，子組件想把它看成局部數據來用；

解決方法：定義一個局部變量，並用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}    
複製代碼

• Prop 做爲原始數據傳入，由子組件處理成其它數據輸出。

解決方法： 定義一個計算屬性，處理 prop 的值並返回：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
複製代碼

PS：上邊的內容是vue文檔裏邊有說的，我只是把本身在項目中遇到的問題抽出來了。連接

栗子：

// 父組件 index.vue
<template>
    <div class="content">
        <child :lists="lists"></child>
    </div>
</template>
<script> import child from './child.vue'; export default { components: { child }, data() { return { lists: [] }; }, mounted() { this.lists = [{ name: '01', content: 'hi,' }, { name: '02', content: 'my name is Ellyliang' }]; } }; </script>

// 子組件 child.vue
<template>
    <ul class="content">
       <li v-for="(list, index) in getLists" :key="index" v-html="list.name + list.content"></li>
    </ul>
</template>
<script> export default { props: ['lists'], data() { return { getLists: this.lists }; }, mounted() { this.getLists.push({ name: '03', content: '不要在意內容，我就是測試' }); } }; </script>
複製代碼

子組件如何將數據傳到父組件中

子組件可經過vm.$emit將數據傳遞給父組件

vm.$emit是啥

觸發當前實例上的事件。附加參數都會傳給監聽器回調。 連接

栗子：

// 父組件 index.vue
<template>
    <div class="content">
        <child :lists="lists" @listenToChild="getChildMsg"></child>
    </div>
</template>
<script> import child from './child.vue'; export default { components: { child }, data() { return { lists: [] }; }, mounted() { this.lists = [{ name: '01', content: 'hi,' }, { name: '02', content: 'my name is Ellyliang' }]; }, methods: { getChildMsg(val) { alert(val); // 'hello' } } }; </script>

// 子組件 child.vue
<template>
    <div class="content">
        <ul class="lists">
            <li v-for="(list, index) in getLists" :key="index" v-html="list.name + list.content"></li>
        </ul>
    </div>
</template>
<script> export default { props: ['lists'], data() { return { getLists: this.lists }; }, mounted() { this.getLists.push({ name: '03', content: '不要在意內容，我就是測試' }); setTimeout(() => { this.$emit('listenToChild', 'hello'); }, 15000); } }; </script>
複製代碼

子組件給父組件傳數據是否是也很方便。實現方法是就是在子組件中$emit數據，而後在父組件中經過事件@事件名接收值。

Event Bus

事件巴士這種方法，不只能處理父子組件傳遞，子父組件傳遞，仍是處理平級組件之間的數值傳遞。其實現方法就是在全局new一個vue實例，而後傳值給bus, 就是let bus = new vue();。經過這個全局的bus中的$emit, $on等等去實現數據的傳遞。這樣處理有個問題，因爲event bus處理數據傳遞很方便，無論在哪裏均可以傳遞，這樣致使濫用，從而致使代碼很難去理解。

Event Bus實現

let bus = new Vue();
// 觸發組件 A 中的事件
bus.$emit('id-selected', 1);
// 在組件 B 建立的鉤子中監聽事件
bus.$on('id-selected', function (id) {
// ...
});
複製代碼

具體組件的封裝和使用，可參考vue-bus。

其它方式

除了以上3種方法，還有就是經過vuex去處理數據的傳遞，可是我尚未接觸，你們要感興趣，本身去學習。