vue3父子组件的通讯

1、依赖注入

有时，我们希望能跨父子组件通讯，比如，无论组件之间嵌套多少层级，我都希望在后代组件中能访问它们祖先组件的数据。

父组件

// 使用<script setup>
<script setup>
import { provide } from 'vue'

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

// 不使用<script setup>
import { provide } from 'vue'

export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  }
}

• 除了在一个组件中提供依赖之外，还可以在整个引用层提供依赖（在main.js中使用，所有的vue组件都可以使用）

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

• 如果某个后代组件需要provide提供的值，只需要通过inject(‘注入数据名’)即可

• 如果祖先没传入你要注入的值，我们可以设置默认值

const value = inject('message', '这是默认值')
//使用的话直接在template标签直接使用就好了

2、父组件使用子组件的数据

当我们直接想使用子组件的数据和方法时，需要在子组件使用defineExpose

//要使用这个语法，需要将 setup attribute 添加到 <script> 代码块上：
<script setup>
console.log('hello script setup')
//里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。
</script>

当我们的组件使用这种语法时，是不可以用setup（）这种语法的写法获取子组件的数据或方法
为了在 script setup 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏：

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

const a = 1
const b = ref(2)

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

</script>

 3、父子间通讯，父传子，子传父

// 父组件
<script setup>
import { ref,onMounted } from 'vue'
import childrenTest_oneVue from "./conponents/childrenTest_one.vue";

const childrenOne = ref(null)
onMounted(()=>{
  childrenOne.value.childMethod()
})
</script>

<template>
  <childrenTest_oneVue ref="childrenOne"/>
</template>

//----------------------分界线-----------------------
//子组件

<script setup>
const childStr = '我在子组件定义'
const childMethod = () => {
  console.log('我是在子组件定义的方法')
}
defineExpose({
  childStr,
  childMethod
})
</script>