vue3中使用script-setup时,通过ref获取子组件的属性和方法。以及父子组件如何通信的区别。

在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获取子组件的属性和方法呢?
我们得知道几个不同的地方:

1、props 的接收方式变化

由于整个 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>

2、主要依赖defineExpose,子组件需要通过 defineExpose将数据抛出。

使用

你可能感兴趣的:(vue相关问题(vue3,vue2),vue.js)