vue3通过ref获取子组件defineExpose的数据和方法

最新推荐文章于 2025-03-05 15:18:44 发布

原创最新推荐文章于 2025-03-05 15:18:44 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

JavaScript面试问题同时被 3 个专栏收录

86 篇文章

订阅专栏

vue

38 篇文章

订阅专栏

MVVM

2 篇文章

订阅专栏

本文介绍了在Vue中如何使用`defineAsyncComponent`异步加载子组件，并展示了如何通过`ref`和`watchEffect`实现父子组件间的数据共享以及事件监听。

1. 父组件:

<script setup>
import { defineAsyncComponent, watchEffect, toRefs, reactive } from 'vue';

// 异步组件
const Test = defineAsyncComponent(()=>import('./xx/Test.vue'))

const child1Ref = ref(null)
const state = reactive({
  age: 1,
  name: '2',
  sayHello: null,
})
watchEffect(() => {
    // 拿到子组件的一些数据
    console.log(child1Ref.value)
    const obj = toRefs(child1Ref.value)
    console.log(obj.a, obj.b)
    state.name = obj.b
    state.age = obj.a
    state.sayHello = obj.onSayHello
})

</script>

<template>
  {{ state.age }} -- {{ state.name }}
  <button @click="state.sayHello">say hello</button>
  <Test ref="child1Ref"/>
</template>

2. 子组件

<script setup>
import { ref, defineExpose } from 'vue'

const a = ref(101)
const b = ref('sddewfewfew')

const onSayHello = () => {
  console.log('hello')
}
defineExpose({
    a,
    b,
    onSayHello,
})

</script>

<template>
    <p>Child1</p>
</template>