教育视频网站开发,做网站一定要有公司吗,前台网站开发,wordpress跳转链接插件汉化简介
使用script setup的组件是默认关闭的————即通过模板引用或者$parent链获取到的组件的公开实例#xff0c;不会暴露在任何在script setup中声明的绑定
换句话说#xff0c;如果一个子组件使用的是选项式 API 或没有使用 script setup…简介
使用script setup的组件是默认关闭的————即通过模板引用或者$parent链获取到的组件的公开实例不会暴露在任何在script setup中声明的绑定
换句话说如果一个子组件使用的是选项式 API 或没有使用 script setup被引用的组件实例和该子组件的 this 完全一致这意味着父组件对子组件的每一个属性和方法都有完全的访问权。
但是如果使用了 script setup 的组件这种组件是默认私有的也就是一个父组件无法访问到一个使用了 script setup 的子组件中的任何东西除非子组件在其中通过 defineExpose 宏显式暴露
script setup
import { ref } from vueconst a 1
const b ref(2)// 像 defineExpose 这样的编译器宏不需要导入
defineExpose({a,b
})
/script举个栗子
父组件获取子组件的实例去触发子组件实例身上的方法。 父组件
template
div classp-20 pb-0 mb-4div父组件/divbutton classmt-4 clickhandleClick点我聚焦/button
/div
Child refchildeRef/Child
/templatescript setup langts
import { ref, provide, onMounted } from vue;
import Child from ./Child.vue;const childeRef refHTMLInputElement | null(null);const handleClick () {childeRef.value?.inputRef?.focus();
};
/script子组件
templatehr /div classp-20 pt-4div子组件/divinputrefinputRefplaceholder请输入哈哈哈哈classborder-1 mt-4/br //div
/templatescript setup langts
import { ref } from vue;const inputRef refHTMLInputElement | null(null);defineExpose({inputRef,
});
/script参考文档
https://cn.vuejs.org/api/sfc-script-setup.html#defineexposehttps://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component
