医药网站 备案,高质量营销型网站定做价格,贵阳市住房和城乡建设局政务网站,建设商务网站pptVue3 组合式API Setup语法糖 如何获取组件实例#xff1f;
Vue2获取方式
在 Vue2 中#xff0c;我们可以给组件设置 ref 属性后#xff0c;就可以直接通过#xff1a;this.$refs.HelloRef 来获取组件实例中所有的属性和方法
templateHello refHelloR…Vue3 组合式API Setup语法糖 如何获取组件实例
Vue2获取方式
在 Vue2 中我们可以给组件设置 ref 属性后就可以直接通过this.$refs.HelloRef 来获取组件实例中所有的属性和方法
templateHello refHelloRef /
/templateVue3获取方式
在 Vue3 中如果采用了组合式API它是没有 this 的所以写法与 Vue2 略有不同。我们可以这么做来获取组件中我们想要的数据
App.vue 首先老规矩在 App.vue 中通过给 Hello.vue 子组件设置 ref 属性来获取子组件向父组件暴露的属性和方法
template!-- 1. 给组件设置ref属性 --Hello refHelloRef /button clickbtn获取组件实例/button
/templatescript langts
import { ref } from vue;
import Hello from ./components/Hello.vueexport default {setup() {interface Hello { info: string, func: () void }// 2. 定义组件变量const HelloRef refHello | null(null)const btn () {// 4. 获取组件实例console.log(HelloRef.value?.info); // HelloHelloRef.value?.func() // Hello Vue3!}return { btn }}
}
/scriptHello.vue 在 Hello.vue 子组件中通过 return 暴露出父组件需要的属性和方法即可
templateh1Hello/h1
/templatescript langts
import { ref } from vue;export default {setup() {const info refstring(Hello)const func () {console.log(Hello Vue3!);}return { info, func }}
}
/script使用 setup 语法糖
但如果使用了 setup 语法糖则需要用到 defineExpose 宏函数来解决这个问题。
App.vue
templateHello refHelloRef /button clickbtn获取组件实例/button
/templatescript setup langts
import { ref } from vue;
import Hello from ./components/Hello.vueinterface Hello { info: string, func: () void }const HelloRef refHello | null(null)const btn () {console.log(HelloRef.value?.info); // HelloHelloRef.value?.func() // Hello Vue3!
}
/scriptHello.vue 在 Hello 组件中通过 defineExpose 将需要暴露给父组件的属性和方法导出
templateh1Hello/h1
/templatescript setup langts
import { Ref, ref } from vue;const info refstring(Hello)const func () {console.log(Hello Vue3!);
}// 3. 通过 defineExpose 暴露属性 / 方法// js写法
// defineExpose({ info, func })// ts写法
defineExpose{ info: Refstring, func: () void }({ info, func })
/script注意 在组合式API setup 语法糖中子组件不通过 defineExpose 将属性 / 方法暴露出去父组件是无法获取到对应数据的
