Vue组件中利用.sync修饰符实现对prop进行双向数据绑定 update:my-prop-name

在有些情况下，我们需要对一个 prop 进行“双向绑定”。官方推荐以update:my-prop-name 的模式触发事件(因为以真正的双向绑定方式会带来维护上的问题--子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源)

案例：sync 修饰符 实现父子组件同步数据

.sync 修饰符

官网：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符

原理说明：

通常我们要使父子组件中的数据时刻保持同步，可以这样来实现：

父组件中：

<child-page :data="childData"></child-page>

子组件注册data数据：

props: ['data']

 

子组件改变data：通过点击按钮，触发update事件，将要修改的值传入

<x-button @click.native="updataChildDataByC">子组件点击修改父组件参数</x-button>

methods: {
  updataChildDataByC() {
    this.$emit('update', '子组件改变了childData')
  }
}

父组件中接收：

<child-page :data="childData" :update="data=>childData=data"></child-page>

### 其实sync就是这样的原理，vue提供了sync修饰符简化了上面的代码
父组件：

<child-page :data.sync="childData"></child-page>

子组件：

methods: {
  updataChildDataByC() {
    this.$emit('update:data', '子组件改变了childData')
  }
}

完整代码：

父组件

 

<template>
  <group title="sync 修饰符 实现父子组件同步数据" label-width="15em">
    <div>父组件的【childData】：{{childData}}</div>
    <child-page :data.sync="childData"></child-page>
    <x-button @click.native="updataChildDataByF">父组件点击修改childData</x-button>
  </group>
</template>

<script type="text/ecmascript-6">
  import ChildPage from './ChildPage.vue'
  import {
    Group,
    XButton
  } from 'vux'

  export default {
    components: {
      Group,
      XButton,
      ChildPage
    },
    data() {
      return {
        childData: '我是父组件要传递给子组件的childData'
      }
    },
    methods: {
      updataChildDataByF() {
        this.childData = '父组件改变了childData'
      }
    },
    created() {
    }
  }
</script>

<style lang="less" scoped>
</style>

子组件：

 

<template>
  <group title="子组件" label-width="15em">
    <box gap="10px 10px">
      <h2>父组件传递来的参数【data】: {{ data}}</h2>
      <x-button @click.native="updataChildDataByC">子组件点击修改父组件参数</x-button>
    </box>
  </group>
</template>

<script type="text/ecmascript-6">
  import {
    Group,
    XButton
  } from 'vux'

  export default {
    name: 'm-sync-child',
    props: ['data'],
    components: {
      Group,
      XButton
    },
    data() {
      return {}
    },
    methods: {
      updataChildDataByC() {
        this.$emit('update:data', '子组件改变了childData')
      }
    },
    created() {
    }
  }
</script>

<style lang="less" scoped>
</style>

补充：v-model 实现父子组件同步数据

 表单类型的双向绑定：

官网：https://cn.vuejs.org/v2/guide/forms.html#在组件上使用-v-model