在 Vue 3.0 的组合式 API 中,你可以使用 ref 函数来创建模板引用,使得在模板中引用子组件的 DOM 元素或组件实例。这种方式可以方便地进行一些 DOM 操作或访问子组件的属性和方法。

以下是一个示例,演示如何在父组件中使用模板引用引用子组件:
<template>
  <div>
    <!-- 使用 ref 创建模板引用 -->
    <ChildComponent ref="childRef" />

    <!-- 访问子组件的 DOM 元素或实例 -->
    <p>Child Component Text: {{ childText }}</p>

    <!-- 调用子组件的方法 -->
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建模板引用
    const childRef = ref();

    // 访问子组件的 DOM 元素或实例
    const childText = ref('');

    // 调用子组件的方法
    const callChildMethod = () => {
      childRef.value.childMethod();
    };

    return {
      childRef,
      childText,
      callChildMethod
    };
  },
  components: {
    ChildComponent
  }
};
</script>

在上述例子中,childRef 是通过 ref 函数创建的模板引用,然后可以通过 childRef.value 访问子组件的实例。在模板中,可以直接使用 ref 来访问子组件的 DOM 元素或属性。此外,也可以通过 childRef.value 来调用子组件的方法。

以下是子组件的简单实现:
<!-- ChildComponent.vue -->
<template>
  <div>
    <p ref="childElement">Child Component Text</p>
  </div>
</template>

<script>
export default {
  setup() {
    // 在子组件中使用 ref 创建 DOM 元素的引用
    const childElement = ref();

    // 在子组件中定义一个方法
    const childMethod = () => {
      console.log('Child method called!');
    };

    // 在模板中暴露引用和方法
    return {
      childElement,
      childMethod
    };
  }
};
</script>

在子组件中,通过 ref 函数创建了 childElement,并将它赋值给 <p> 元素,使得在父组件中可以引用这个元素。同时,定义了一个名为 childMethod 的方法,可以在父组件中调用。


转载请注明出处:http://www.zyzy.cn/article/detail/521/Vue 3.0