以下是一个示例，演示如何在父组件中使用模板引用引用子组件：
<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