vue的父组件调用子组件的方法：Vue中实现父子组件数据双向绑定的方法
vue的父组件调用子组件的方法：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: {
前言一个中型的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 可以说，是用来实现父子组件数据双向绑定的。
