在vue3中我们可以通过ref
去获取子组件的方法和属性,实现父子组件的通信。
见文章:vue3 组件间互相通信(包括父子、爷孙、兄弟、全局)
但是我们在Vue 的 3.1.2
版本是针对 script-setup
的一个分水岭版本,自 3.1.4
开始 script-setup
进入定稿状态,部分旧的 API 已被舍弃。
script-setup
下使用组件的最大优点就是,子组件无需手动注册!
子组件的挂载,在标准组件里的写法是需要 import
后再放到 components
里才能够启用。
在 script-setup
模式下,只需要导入组件即可,编译器会自动识别并启用。
<!-- 使用 script-setup 格式 -->
<template>
<Child />
</template>
<script setup lang="ts">
import Child from '@cp/Child.vue'
</script>
当然,这时候我们如何通过ref
获取子组件的属性和方法呢?
我们得知道几个不同的地方:
由于整个 script
都变成了一个大的 setup
函数,没有了组件选项,也没有了 setup
的入参,所以没办法和标准写法一样去接收 props 了。
这里需要使用一个全新的 API :defineProps
。
defineProps
是一个方法,内部返回一个对象,也就是挂载到这个组件上的所有 props
。
<script setup>
import { defineProps, onMounted} from 'vue'
const props = defineProps({
name: {
type: String,
required: false,
default: 'Petter',
},
userInfo: Object,
tags: Array,
})
onMounted(() => {
console.log(props) // 这样就可以获取props
})
</script>
defineExpose
,子组件需要通过 defineExpose
将数据抛出。使用 的组件是默认关闭的——即通过模板引用或者
$parent
链获取到的组件的公开实例,不会暴露任何在 中声明的绑定。
可以通过 defineExpose
编译器宏来显式指定在 组件中要暴露出去的属性:
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number }
(ref 会和在普通实例中一样被自动解包)。