vue 子组件如何获得父组件数据（Vue中实现父子组件数据双向绑定的方法）
一个中型的web应用，为了易维护，我们经常会把一个页面，拆分为多个组件，每个组件再实现其独立的功能，亦符合低耦合、高内聚思想。
案例
子组件的一个输入框中，输入值发生变化，外围的父组件，也可以实时显示其最新值
代码
实现案例中的功能，实际上也不难，关键在于利用 vue 提供的 .sync 属性
1.父组件 App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<h1>父组件数据：{{ base.managers }}</h1>
<HelloWorld :managers.sync="base.managers"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data() {
return {
'base': {
'managers': 'vue'
}
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这个行代码很关键，借助了 .sync 属性：
<HelloWorld :managers.sync="base.managers"/>
2.子组件 HelloWorld.vue
<template>
<div style="border:1px solid #999;padding:2px;">
<label>
活动管理人：
<input v-model='managers' @input="onManagersChange"/>
</label>
<h4>子组件数据：{{ managers }}</h4>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: ['managers'],
methods: {
onManagersChange(e) {
this.$emit('update:managers', e.target.value)
}
}
}
</script>
vue框架，是一个的数据双向绑定（view层、data层）框架，而 .sync 可以说，是用来实现父子组件数据双向绑定的。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
