Vue3.0学习七：父组件与后代组件之间的传参及回调函数

痛点需求

父子组件，如果父子之间一级之间传参容易一些，但当父组件给孙子，曾孙组件传参时，vue3.0提供了注入的方法，即在父组件中定义provide，即供给方，后代组件中用inject，即注入方法完成传参。

示例1：整个应用中，根组件给后代组件传参

// 根组件
import { createApp } from 'vue'

const app = createApp({})

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

// 后代组件
<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

示例2：父组件给后代组件传参

// 父组件
<script setup>
import { provide } from 'vue'

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

// 后代组件
<script setup>
import { inject } from 'vue'

const message = inject('message')
// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
// 或者
const value = inject('key', () => new ExpensiveClass())
</script>

示例3：父组件给后代组件传参的同时，后代组件需要回调父组件中某一个函数时，即让父组件响应状态数据。

<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

provide('location', {
  location,
  updateLocation
})
</script>

<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>