vue中子组件修改父组件的数据

在Vue中，子组件直接修改父组件的数据是不被推荐的，因为Vue遵循单向数据流的原则。但是，你可以通过使用自定义事件来实现子组件向父组件传递数据的目的。

具体步骤如下：

1. 在父组件中定义一个数据属性，例如`parentData`。
2. 在子组件中，通过`$emit`方法触发一个自定义事件，并传递需要传递给父组件的数据。例如：`this.$emit('eventName', childData)`。
3. 在父组件中监听子组件触发的自定义事件，并在触发事件时执行相应的方法。例如：`@eventName="updateParentData"`。
4. 在父组件的方法`updateParentData`中，将子组件传递的数据赋值给父组件的数据属性`parentData`。

下面是一个简单的示例代码：

<template>
  <div>
    <p>Parent Component: {{ parentData }}</p>
    <ChildComponent @eventName="updateParentData"></ChildComponent>
 </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    updateParentData(childData) {
      this.parentData = childData;
    }
  }
}
</script>

在子组件中，可以通过调用`$emit`方法来触发自定义事件：

<template>
  <button @click="updateParentData">Update Parent Data</button>
</template>

<script>
export default {
  methods: {
    updateParentData() {
      const childData = 'Child component data';
      this.$emit('eventName', childData);
    }
  }
}
</script>

通过以上方式，子组件就可以通过触发自定义事件，将数据传递给父组件并修改父组件的数据。