Vue3 学习（provide，inject）

最新推荐文章于 2025-05-08 08:42:45 发布

西小贝。

最新推荐文章于 2025-05-08 08:42:45 发布

阅读量848

点赞数

分类专栏： vue3 文章标签：学习 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46535287/article/details/125147607

版权

vue3 专栏收录该内容

2 篇文章

订阅专栏

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>