vue父子通訊是單向數據流，也就是子組件不能修改父組件的值，但是在一些情況下是需要這樣做的。
先看官方文檔：
接下來舉例實現
1、實現一個雙向數據綁定，子組件改變的時候，父組件也在改變
父組件
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<child :titleSync.sync="title"/>
<br>
<span>{{ '我是父組件：' + title}}</span>
</div>
</template>
<script>
import Child from '../components/Child'
export default {
name: 'home',
components: {
Child,
},
data() {
return {
title: 'sync測試用例',
}
}
}
</script>
子組件
<template>
<div>
-----------------Child------------------
<input type="text" v-model="config">
</div>
</template>
<script>
export default {
name: 'Child',
props: {
titleSync: String,
},
computed: {
config: {
get() {
return this.titleSync
},
set(val) {
this.$emit('update:titleSync', val)
}
}
}
}
</script>
<style>
</style>
結果圖:
2、點擊子組件按鈕修改父組件數據
父組件
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<child :nameSync.sync="name"/>
<br>
<span>{{ '我是父組件：' + name}}</span>
</div>
</template>
<script>
import Child from '../components/Child'
export default {
name: 'home',
components: {
Child
},
data() {
return {
title: 'sync測試用例',
name: '我是sync的第二個測試用例'
}
}
</script>
子組件
<template>
<div>
-----------------Child------------------
<br>
<button @click="syncClick">點擊更改名字</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
nameSync: String,
},
data() {
return {
name: '張三'
}
},
methods: {
syncClick() {
this.$emit('update:nameSync', this.name)
}
},
}
</script>
<style>
</style>
結果圖：
