vue中通过.sync修饰符实现子组件修改父组件数据

vue父子通讯是单向数据流，也就是子组件不能修改父组件的值，但是在一些情况下是需要这样做的。
先看官方文档：

接下来举例实现

1、实现一个双向数据绑定，子组件改变的时候，父组件也在改变

父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">

    <child  :titleSync.sync="title"/>    

    <br>
    <span>{{ '我是父组件：' + title}}</span>
  </div>
</template>

<script>
import Child from '../components/Child'

export default {
  name: 'home',
  components: {
    Child,
  },
  data() {
    return {
      title: 'sync测试用例',
    }
  }
}
</script>

子组件

<template>
  <div>
     -----------------Child------------------

     <input type="text" v-model="config">

  </div>
</template>

<script>
export default {
    name: 'Child',
    props: {
      titleSync: String,
    },
    computed: {
      config: {
        get() {
          return this.titleSync
        },
        set(val) {
          this.$emit('update:titleSync', val)
        }
      }
    }
}
</script>

<style>

</style>

结果图:

vue中通过.sync修饰符实现子组件修改父组件数据

原文：https://www.cnblogs.com/nayek/p/12054664.html