vue修饰符sync 父组件如何拿到传过来的值

Vue修饰符sync是用于实现子组件对父组件数据的双向绑定。当我们需要在子组件中修改父组件中的数据时，可以使用sync修饰符。具体的实现方法如下：

在父组件中，通过v-bind指令传递数据，并使用sync修饰符，如下所示：

<template>
  <child :data.sync="parentData"></child>
</template>
<script>
  export default {
    data() {
      return {
        parentData: 'hello'
      }
    },
    ...
  }
</script>

在子组件中，通过props接收父组件传递过来的数据，并使用$emit方法将修改的数据传递回父组件，如下所示：

<template>
  <div>
    <input type="text" v-model="localData" @input="updateData">
  </div>
</template>
<script>
  export default {
    props: {
      data: String
    },
    data() {
      return {
        localData: this.data
      }
    },
    methods: {
      updateData() {
        this.$emit('update:data', this.localData);
      }
    }
  }
</script>

在以上的代码中，子组件通过props接收父组件传递过来的数据，并将数据保存在localData属性中。当用户修改localData属性时，触发updateData方法，该方法使用$emit方法将修改后的数据传递回父组件。

在父组件中，监听子组件中的update:data事件，并将传递过来的数据赋值给parentData属性，如下所示：

<template>
  <child :data.sync="parentData" @update:data="handleUpdate"></child>
</template>
<script>
  export default {
    data() {
      return {
        parentData: 'hello'
      }
    },
    methods: {
      handleUpdate(data) {
        this.parentData = data;
      }
    }
  }
</script>

在以上的代码中，父组件监听子组件中的update:data事件，并将传递过来的数据赋值给parentData属性。由于父组件使用了sync修饰符，因此可以直接使用parentData属性获取子组件中修改后的数据。