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

父组件主动调用子组件方法，子组件主动获取父组件的props

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将数据抛出。

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)。

子组件emit方法，父组件被动调用

父组件：

<Child ref="childRef" @update-list="getList" />
<script setup>
const getList =()=>{
	console.log('通过子组件触发')
}
</script>

子组件：

<script setup>
const emit = defineEmits(['updateList'])
const submitBtn=()=>{
	emit('updateList')
}
</script>