vue3 通过ref 父组件控制子组件的值，怎么写?

在 Vue 3 中，通过 ref 可以让父组件直接访问和控制子组件的实例及其属性或方法。以下是一个完整的例子，演示如何通过 ref 在父组件中控制子组件的值。

1. 父组件控制子组件的值示例

父组件 (Parent.vue)

<template>
  <div>
    <h2>父组件</h2>
    <button @click="setChildValue('Hello from Parent')">设置子组件的值</button>
    <button @click="resetChildValue">重置子组件的值</button>

    <!-- 绑定子组件的 ref -->
    <ChildComponent ref="childRef" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    // 创建 ref 来访问子组件的实例
    const childRef = ref(null);

    // 修改子组件的值
    const setChildValue = (value) => {
      if (childRef.value) {
        childRef.value.childValue = value;
      }
    };

    // 重置子组件的值
    const resetChildValue = () => {
      if (childRef.value) {
        childRef.value.childValue = '';
      }
    };

    return { childRef, setChildValue, resetChildValue };
  },
};
</script>

子组件 (ChildComponent.vue)

<template>
  <div>
    <h3>子组件</h3>
    <input v-model="childValue" placeholder="子组件的输入" />
    <p>当前值: {{ childValue }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    // 定义子组件的值
    const childValue = ref('');

    return { childValue };
  },
});
</script>

2. 说明

1. 父组件：

   • 通过 ref 获取子组件的实例 (childRef)。
   • 通过按钮调用方法 setChildValue 和 resetChildValue 来修改或重置子组件的值。

2. 子组件：

   • 使用 v-model 绑定 childValue，这样父组件的修改会立即反映在子组件的输入框中。

3. 运行效果

• 点击“设置子组件的值”按钮时，子组件的输入框会更新为 "Hello from Parent"。
• 点击“重置子组件的值”按钮时，子组件的输入框会清空。

4. 总结

在 Vue 3 中，通过 ref 可以方便地访问子组件实例，直接操作其数据或调用其方法。这是父组件和子组件之间进行双向通信的一种常见方式。