Vue筆記——父子元件的雙向資料繫結
阿新 • • 發佈:2018-12-14
Vue專案中經常使用到元件之間的數值傳遞,實現的方法很多,但是原理基本上大同小異。
子元件向父元件出傳遞資料,使用自定義事件的方式。
父元件向子元件傳遞資料,使用props屬性的方式。
一、實現思路
之前寫過兩篇文章,分別介紹了父子元件之前如何單向傳遞資料,如果你對單向傳遞資料不熟悉,可以參考著兩篇文章:
如果我們明確瞭如何在父子元件之間單向傳遞資料,那麼在這個基礎之上,我們就可以實現資料的雙向繫結。
比如父元件向子元件傳遞了一個數據,子元件接收到這個資料之後,儲存到自己的變數中。如果子元件中修改了這個變數,再通過觸發自定義事件,將這個資料傳遞給父元件。父元件接收到這個資料之後,儲存到自己對應的變數中。
這樣就實現父子元件的雙向資料繫結,如果父元件中改變了這個資料,那麼子元件中會實時修改對應的資料;如果子元件中改變了這個資料,父元件中也會實時修改對應的資料。
二、具體實現
1.子元件程式碼:
<template>
<div class="Child">
<h1>{{ val }}</h1>
<!-- 子元件中可以修改value數值 -->
子元件:<input type="text" v-model="value">
</div>
</template>
< script>
export default {
name: 'Child',
// 在props屬性裡接收父元件傳遞過來的資料
props: ["val"],
data: function () {
return {
value: this.val // 接收父元件傳遞過來的資料,儲存到變數中
}
},
// 一旦value數值發生改變,子元件觸發自定義事件changeValue,將資料傳遞到父元件
watch: {
value: function () {
console. log(666);
this.$emit('changeValue', this.value)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
2.父元件程式碼:
<template>
<div id="app">
<!-- 使用v-bind命令將父元件中的資料繫結到子元件上 -->
<Child v-bind:val="value" v-on:changeValue="receiveValue"></Child>
<!-- 父元件資料繫結,可以修改value的數值 -->
父元件:<input type="text" v-model="value">
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'App',
components: {
Child
},
data: function () {
return {
value: "初始化資料",
}
},
methods:{
// 子元件觸發changeValue事件,呼叫此方法,將子元件中的資料傳遞到父元件中
receiveValue:function(receive){
this.value = receive;
}
}
}
</script>
<style>
</style>