vue子传父sync

.sync修饰符用于实现Vue中的子组件向父组件传递数据并实现双向绑定。通过.sync修饰符，可以将子组件的数据更新反映到父组件中。

在父组件中，使用.sync修饰符时，需要将子组件的属性值用v-bind.sync绑定到父组件中的一个变量上。然后，通过监听子组件的update事件，在事件处理函数中更新父组件的变量。

举个例子，假设有一个父组件和一个子组件，父组件将一个变量doc传递给子组件：

父组件代码：

<template>
  <div>
    <h1>父组件：{{doc.title}}--{{doc.content}}</h1>
    <Child v-bind.sync="doc"></Child>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  data() {
    return {
      doc: {
        title: '前端',
        content: 'Vue',
      },
    }
  },
  components: {
    Child,
  },
}
</script>

子组件代码：

<template>
  <div>
    <input v-model="localTitle" />
    <button @click="updateParent">更新父组件</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  data() {
    return {
      localTitle: this.title,
    }
  },
  methods: {
    updateParent() {
      this.$emit('update:title', this.localTitle)
    },
  },
}
</script>

在子组件中，使用v-model指令将子组件中的输入框与localTitle变量进行双向绑定。然后，在点击按钮时，通过$emit方法触发update事件，并传递localTitle作为参数。

在父组件中监听update事件，并在事件处理函数中更新父组件的doc.title属性值。