前言

一个中型的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 可以说，是用来实现父子组件数据双向绑定的。