Vue中实现父子组件数据双向绑定的方法.sync

前言

一个中型的web应用，为了易维护，我们经常会把一个页面，拆分为多个组件，每个组件再实现其独立的功能，亦符合低耦合、高内聚思想。

 

除了我们之前常用的v-model，还有利用 vue 提供的 .sync 属性。所以当我们用了.sync就可以不必要使用$emit来通过自定义的事件传递了。

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>

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