vue父子传值:关于ref的取值

最近学习vue3项目开发时，需要用子组件的方法，因为用的是script setup语法糖。所以这种出了点问题，集齐网上零散资料后，终于解决。

关于Vue2语法

Vue2中，直接在子组件上设置ref属性后，可通过this.$ref.ref值访问到子组件的值

<Son ref="child1" />
this.$refs.child1 可访问子组件的方法和传递值
子组件通过this.$parent可访问父组件的方法和值

Vue3使用

前面步骤和vue2是类似,父组件调用子组件的值

1. 组件设置ref值

<Son ref="child1" />

2. 组件实例获取

设置完成，Vue3可获取

    const child1 = ref()

变量的名字需要和上面ref的一致,否则会打印undefined。 这里其实有点争议，因为我查找资料室时，有的说要在生命周期onMounted中调用，我经过测试，不用在其生命周期调用也行。

3. 子组件内设置对外公开的变量

最重要的是这点，因为setup的组件默认是关闭的，使用语法糖需要使用defineExpose编译器宏将其抛出，就可是用

// 子组件代码
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});

父组件内调用：

child1.value.foo()

这样就可以调用到子组件的方法了。
完整代码 子组件

<template>
    // 渲染从父级接受到的值
    <div>Son: {{ valueRef }}</div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
      const valueRef = ref('')
      
      // 该函数可以接受父级传递一个参数，并修改valueRef的值
      const acceptValue = (value: string) => (valueRef.value = value)
      defineExpose({
        acceptValue
});
  </script>

父组件

<template>
    <div>sonRef</div>
    <button @click="sendValue">send</button>
    <!-- // 这里ref接受的字符串，要setup返回的ref类型的变量同名 -->
    <Son ref="sonRef" />
  </template>
  
  <script setup lang="ts">
  import {ref } from 'vue'
  import Son from './son.vue'
      // 如果ref初始值是一个空，可以用于接受一个实例
      // vue3中获取实例的方式和vue2略有不同
      const sonRef = ref()
  
      const sendValue = () => {
        // 可以拿到son组件实例，并调用其setup返回的所有信息
        console.log(sonRef.value)
        
        // 通过调用son组件实例的方法，向其传递数据
        sonRef.value.acceptValue('123456')
      }
  
  </script>