vue父组件更新子组件数据

在Vue中，父组件可以通过props将数据传递给子组件，子组件可以通过监听props的变化来更新自己的数据。但是，如果想要在父组件中更新子组件的数据，则需要使用ref。

具体步骤如下：

1. 在父组件中通过ref属性获取子组件的引用，例如：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="updateChildData">更新子组件数据</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateChildData() {
      this.$refs.child.updateData('new data from parent');
    }
  }
}
</script>

2. 在子组件中定义一个方法，用于接收来自父组件的数据更新请求，并更新自己的数据，例如：

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  props: {
    initData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: this.initData
    }
  },
  methods: {
    updateData(newData) {
      this.data = newData;
    }
  }
}
</script>

这样，当父组件中点击按钮时，就会调用子组件中的updateData方法，更新子组件的数据。