X

XiaoSong

V1

2023/02/10阅读:22主题:默认主题

vue3使用技巧,你不知道的获取子组件的方法

有的时候你需要获取子组件的里的属性,这里教大家一种简单有效的方式,defineExpose 宏显式暴露:

子组件中:

const name = ref('xiaomi')
const age = ref(12)
//把两个属性暴露出去
defineExpose({ 
    name, age
})

父组件中:

<!-- 在子组件中加上ref属性 -->
<Child ref="childRef"></Child>
const childRef = ref(null)

onMounted(() => { 
    // 此时获取到的子组件实例类型是{name: string, age: number}
    // 以下会输出 xiaomi, 12。显然已经拿到了属性
    console.log(childRef.value.name, childRef.value.age) 
})

分类:

前端

标签:

Vue.js

作者介绍

X
XiaoSong
V1