Vue父子组件传值

在Vue中，可以使用自定义事件来将子组件中的数据传递给父组件并赋值给父组件的属性。以下是实现该功能的步骤：

在子组件中，定义一个方法，并在该方法中触发一个自定义事件，同时将要传递的数据作为参数传入。例如：

methods: {
  sendDataToParent() {
    const data = '子组件数据';
    this.$emit('data-updated', data);
  }
}

在父组件中，监听自定义事件，并在事件处理程序中接收子组件传递的数据，并将其赋值给父组件的属性。例如：

<template>
  <div>
    <!-- 子组件 -->
    <child-component @data-updated="handleDataUpdate"></child-component>
    
    <!-- 显示父组件属性 -->
    <p>{{ parentData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: ''
    };
  },
  methods: {
    handleDataUpdate(data) {
      this.parentData = data;
    }
  }
};

在上面的代码中，当子组件中的 sendDataToParent 方法被调用时，会触发名为 data-updated 的自定义事件，并且将子组件的数据作为参数传递给父组件。在父组件中，监听了 data-updated 自定义事件，并将接收到的子组件数据赋值给 parentData 属性。最后，在父组件的模板中，通过插值表达式 {{ parentData }} 显示了父组件的属性。

这样，当子组件中的数据发生变化时，就可以通过自定义事件将数据传递给父组件并赋值给父组件的属性。