Преглед изворни кода

feat(组件通信): 在App.ku.vue中暴露exposeRef并通过ref在about.vue中访问

在App.ku.vue中使用defineExpose暴露exposeRef变量,并在about.vue中通过ref引用访问该变量。添加onReady和onShow生命周期钩子来验证访问时机
feige996 пре 8 месеци
родитељ
комит
2e25456c6c
2 измењених фајлова са 16 додато и 1 уклоњено
  1. 6 0
      src/App.ku.vue
  2. 10 1
      src/pages/about/about.vue

+ 6 - 0
src/App.ku.vue

@@ -12,6 +12,12 @@ onShow(() => {
 })
 
 const helloKuRoot = ref('Hello AppKuVue')
+
+const exposeRef = ref('this is form app.Ku.vue')
+
+defineExpose({
+  exposeRef,
+})
 </script>
 
 <template>

+ 10 - 1
src/pages/about/about.vue

@@ -64,9 +64,18 @@ function setTabbarBadge() {
   tabbarStore.setTabbarItemBadge(1, 100)
 }
 // #endregion
+
+const uniKuRoot = ref()
+// 结论:(同上)第一次通过onShow获取不到,但是可以通过 onReady获取到,后面就可以通过onShow获取到了
+onReady(() => {
+  console.log('onReady uniKuRoot exposeRef', uniKuRoot.value?.exposeRef)
+})
+onShow(() => {
+  console.log('onShow uniKuRoot exposeRef', uniKuRoot.value?.exposeRef)
+})
 </script>
 
-<template>
+<template root="uniKuRoot">
   <view>
     <view class="mt-8 text-center text-xl text-gray-400">
       请求调用、unocss、static图片