vue3 新增defineExpose的使用

仰柳 2021-11-01

defineExpose

这个方法是vue3 3.2+ 版本新增的，大概意思就是 在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏，简单的用法如下：

js
# 子组件代码片段
<script setup>
    import {ref} from "vue";

    function childFn() {
        console.log('我是子组件');
    }
    
    const msg = 'Hello World';
    const num = ref(0);
    
    defineExpose({ //
        msg,
        num
    });
</script>

js
#父组件代码片段
<Index ref="I"></Index>

<script setup>
    import Index from "./index.vue";

    const I = ref(null);
    
    function test() {
        console.log(I.value.msg) // Hello World
    }

</script>

vue3 defineExpose，defineEmits，defineProps的使用

defineExpose用在子组件中，将子组件中的属性暴露出去，然后在父组件中使用ref得到。

Vue3父组件读取子组件属性方法（通过模板引用）

1. 在子组件中暴露属性：子组件必须使用 defineExpose 编译器宏，显式暴露需要被父组件访问的属性和方法。

   // ChildComponent.vue
   <script setup>
   import { ref } from 'vue'
   const childCount = ref(0)
   const childMethod = () => {
     childCount.value++
     console.log('子组件方法被调用')
   }
   // 关键步骤：暴露给父组件
   defineExpose({
     childCount,
     childMethod
   })
   </script>

2. 在父组件中获取引用：父组件通过 ref 属性为子组件创建引用，然后在生命周期（如 onMounted）或方法中通过 value 属性访问。

   // ParentComponent.vue
   <template>
     <ChildComponent ref="childRef" />
     <button @click="callChildMethod">调用子组件方法</button>
   </template>
   <script setup>
   import { ref, onMounted } from 'vue'
   import ChildComponent from './ChildComponent.vue'
   const childRef = ref(null) // 创建ref
   const callChildMethod = () => {
     if (childRef.value) {
       childRef.value.childMethod() // 调用子组件方法
       console.log('子组件的count:', childRef.value.childCount) // 读取子组件属性
     }
   }
   onMounted(() => {
     // 组件挂载后即可访问
     console.log(childRef.value)
   })
   </script>