这篇文章主要介绍“vue2和vue3中provide/inject怎么使用”，在日常操作中，相信很多人在vue2和vue3中provide/inject怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue2和vue3中provide/inject怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
provide是一个对象或是返回一个对象的函数。
写在祖先组件中，用于提供给子组件可以注入的值。组件的关系为a-b-c-d
在a组件中将参数num进行传递
计算
安全
数据库
网络和加速
企业服务
export default {
components: { BCom },
data() {
return {
num: 2,
};
},
provide() {
return {
num: this.num,
};
},
};inject为：一个数组，数组元素为注入的变量
一个对象，key为注入的变量，value为一个包含form和default的对象
num: { from: 'num', default: '20' }
在d组件中接收注入的变量
写法一：
export default {
inject: ["num"],
};写法二：
export default {
inject: {
num: {
form: "num",
default: 20,
},
},
};
可以看到d中显示的为inject注入的num变量。如果在a中不进行provide，则会显示默认值。
num 不是响应式的
点击+100按钮，a组件显示的值改变，d组件显示的值没有改变。
a组件：
<template>
<div >
我是组件a
<h5>{{ num }}</h5>
<button @click="add">+100</button>
<BCom></BCom>
</div>
</template>
<script>
import BCom from "./b-com.vue";
export default {
components: { BCom },
data() {
return {
num: 2,
};
},
provide() {
return {
num: () => this.num,
};
},
methods: {
add() {
this.num = this.num + 100;
},
},
};
</script>
<style>
</style>b组件
<template>
<div
style="
width: 300px;
height: 300px;
background-color: bisque;
"
>
我是组件d
<h5>{{ this.num() }}</h5>
</div>
</template>
<script>
export default {
inject: {
num: {
form: "num",
default: () => {},
},
},
};
</script>
<style>
</style>a组件
<template>
<div >
我是组件a
<h5>{{ num }}</h5>
<button @click="add">+100</button>
<BCom></BCom>
</div>
</template>
<script>
import BCom from "./b-com.vue";
export default {
components: { BCom },
data() {
return {
num: 2,
};
},
provide() {
return {
AThis: this,
};
},
methods: {
add() {
this.num = this.num + 100;
},
},
};
</script>
<style>
</style>d组件
<template>
<div
style="
width: 300px;
height: 300px;
background-color: bisque;
"
>
我是组件d
<h5>{{ this.AThis.num }}</h5>
</div>
</template>
<script>
export default {
inject: {
AThis: {
form: "AThis",
default() {
return {};
},
},
},
};
</script>
<style>
</style>
provide()接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。
<script setup>
import { ref, provide } from 'vue'
// 提供静态值
provide('num')
// 提供响应式的值
const count = ref(0)
provide('count', count)
</script>inject:
第一个参数是注入的 key。
Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，
inject()将返回undefined，除非提供了一个默认值。第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数，那么你必须将
false作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。
<script setup>
import { inject } from 'vue'
// 注入值的默认方式
const num= inject('num')
// 注入响应式的值
const count = inject('count')
// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script>注：在d组件中，如果data中存在变量num，inject又注入了变量num，在页面中会显示data中num的值。
到此，关于“vue2和vue3中provide/inject怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/weixin_57399180/article/details/126901339
