Vue3 学习（provide，inject）

1.provide（provide的第一个为名称，第二个值为所需要传的参数）

<template>
  <div id="nav">
    <h3>{{name}}</h3>
  </div>
</template>
<script>
	import { provide } from 'vue'
    import Home from './Home.vue' 
	export default {
        components: {
          Home
          }
		setup() {
			let name = 'jxaaaaa'
			provide('name', name); 
			return {
				name,
			}
		}
	}
</script>

2.inject（inject的第一个为key，第二个值为默认值）

<template>
  <div id="nav">
    <h3>{{name}}</h3>
  </div>
</template>
<script>
	import { inject } from 'vue' 
	export default {
		setup() {
			const name = inject('name') // 可以写默认值 也可以不写
			return {
				name,
			}
		}
	}
</script>

这俩个函数不是响应式  用于子孙传值（父子传值不建议使用）接下来把这俩个函数变成响应式
变成响应式数据需要用到ref readonly 这俩个方法

只用ref的话会把数据变成了双向的 操作子组件会把父组件的值也修改  加上readonly 这个方法就变成单向

<template>
  <div id="nav">
    <h3>{{name}}</h3>
  </div>
</template>
<script>
	import { provide, ref, readonly } from 'vue'
    import Home from './Home.vue' 
	export default {
        components: {
          Home
          }
		setup() {
			let name = ref('jxaaaaa')
			provide('name', readonly(name)); 
			return {
				name,
			}
		}
	}
</script>