父组件 清空 深层 子组件 的数据 代码示例 vue

可以通过 `$refs` 属性获取到子组件实例，然后调用子组件实例的方法来清空数据。

父组件的模板代码：

<template>
  <div>
    <button @click="clearChildData">清空子组件数据</button>
    <child ref="child"></child>
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  methods: {
    clearChildData() {
      this.$refs.child.clearData();
    },
  },
};
</script>

子组件的模板代码：

<template>
  <div>
    <input v-model="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    clearData() {
      this.text = '';
    },
  },
};
</script>

以上示例中，父组件通过 `ref` 属性获取到子组件实例，并在点击清空按钮时调用子组件实例的 `clearData` 方法来清空数据。注意，子组件需要提供清空数据的方法。