vue3中的defineExpose使用示例教程
作者：杨贵妃会飞飞飞
这篇文章主要介绍了vue3中的defineExpose使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
简介
使用 <script setup> 的组件是默认关闭的————即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露在任何在 <script setup> 中声明的绑定
换句话说，如果一个子组件使用的是选项式 API 或没有使用 <script setup> ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。
但是如果使用了 <script setup> 的组件，这种组件是默认私有的，也就是一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
// 像 defineExpose 这样的编译器宏不需要导入
defineExpose({
a,
b
})
</script>举个栗子
父组件获取子组件的实例，去触发子组件实例身上的方法。
父组件
<template>
<div class="p-20 pb-0 mb-4">
<div>父组件</div>
<button class="mt-4" @click="handleClick">点我聚焦</button>
</div>
<Child ref="childeRef"></Child>
</template>
<script setup lang="ts">
import { ref, provide, onMounted } from "vue";
import Child from "./Child.vue";
const childeRef = ref<HTMLInputElement | null>(null);
const handleClick = () => {
childeRef.value?.inputRef?.focus();
};
</script>子组件
<template>
<hr />
<div class="p-20 pt-4">
<div>子组件</div>
<input
ref="inputRef"
placeholder="请输入哈哈哈哈"
class="border-1 mt-4"
/><br />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const inputRef = ref<HTMLInputElement | null>(null);
defineExpose({
inputRef,
});
</script>参考文档：
https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component
到此这篇关于vue3中的defineExpose使用的文章就介绍到这了,更多相关vue3 defineExpose使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！