vue3版本provide、inject用法

在父组件操作

<template>
  <div id="nav">
    <h3>{{title}}</h3>
    <button @click="setTitle">同时改变title</button>
  </div>
</template>
<script>
	import { ref, provide } from 'vue'
	export default {
		setup() {
			let title = ref('这个要传的值')
			provide('title', title); // provide的第一个为名称，第二个值为所需要传的参数
			let setTitle = () => {
				title.value = '点击后，title会变成这个'; // 点击后都会有响应式哦！
			}
			return {
				title,
				setTitle
			}
		}
	}
</script>

在不知道要多少层的子组件下调用参数

<template>
  <div class="hello">
    <h4>{{title}}父组件点击之后这个title也会跟着变化哦</h4>
  </div>
</template>
<script>
	import { inject } from 'vue'
	export default {
		let title = inject('title'); // inject的参数为provide过来的名称
		return {
			title
		}
	}
</script>