vue父组件改变子组件数据

在Vue中，父组件可以通过props向子组件传递数据，但是子组件不能直接修改父组件的数据。如果需要修改父组件的数据，可以通过在子组件中触发事件来实现。具体步骤如下：

1. 在父组件中定义一个数据属性，并将其作为props传递给子组件。

2. 在子组件中，通过$emit方法触发一个自定义事件，并将需要修改的数据作为参数传递给父组件。

3. 在父组件中，通过监听子组件的自定义事件，并在事件处理函数中修改相应的数据。

下面是一个示例代码：

父组件：

<template>
  <div>
    <p>父组件数据：{{ parentData }}</p>
    <child :child-data="parentData" @update-parent-data="updateParentData"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      parentData: '父组件初始数据'
    }
  },
  methods: {
    updateParentData(data) {
      this.parentData = data
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>子组件数据：{{ childData }}</p>
    <button @click="updateChildData">修改子组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true
    }
  },
  methods: {
    updateChildData() {
      const newData = '子组件修改后的数据'
      this.$emit('update-parent-data', newData)
    }
  }
}
</script>

在上面的示例中，父组件中定义了一个数据属性parentData，并将其作为props传递给子组件。子组件中通过$emit方法触发了一个名为update-parent-data的自定义事件，并将需要修改的数据作为参数传递给父组件。父组件中监听了子组件的自定义事件，并在事件处理函数中修改了parentData的值。