vue3__Provide / Inject (依赖注入)和mixins

本文主要是介绍vue3__Provide / Inject (依赖注入)和mixins，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、 Provide提供和Inject 注入

Provide提供

<script setup>
import { provide } from 'vue'provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

例如父组件中提供方法

<template>
<div class="home">dfhualsf<div><button @click="favBtn()">增加</button></div><A></A>
</div>
</template><script setup>
import A from '../components/A.vue';let num = ref(12)const favBtn=function(){num.value=num.value+1}
provide('homeMethond',num)</script><style lang="scss">
.home {font-size: 32px;line-height: 50px;
}
</style>

Inject 注入

<script setup>
import { inject } from 'vue'const data= inject('message')
</script>

两个子组件中

<template>
<div class="A"><h1>A组件</h1>{{num}}<hr/><B></B>
</div>
</template><script setup>
import B from './B.vue';
import { inject } from 'vue';let anum=inject('homeMethond')</script><style lang="scss">
.A {font-size: 26px;
}
</style>

<template><div class="B"><h1>B组件</h1>{{bnum}} </div>
</template><script setup>
let bnum=inject('homeMethond')</script><style lang="scss">
.B{font-size: 26px;
}
</style>

此时当父组件的值发生变化的时候，子组件的也会同步变化

二、 mixins（混入已经不推荐使用了）

1.创建mixins文件夹

2.创建mixins.js文件

import { Ref } from "vue";
export default function(){let num = ref(1)let fav=ref(false)const favBtn=function(){num.value+=1fav.value=truesetTimeout(()=>{fav.value=false},2000)}return {num,fav,favBtn}
}

父组件


import { Ref } from "vue";
export default function(){let num = ref(1)let fav=ref(false)const favBtn=function(){num.value+=1fav.value=truesetTimeout(()=>{fav.value=false},2000)}return {num,fav,favBtn}
}

A和B

<template>
<div class="A"><h1>A组件</h1>{{fav? '正在计算中':'计算完成'}}  {{num}}<div><button @click="favBtn()">增加</button></div>
</div>
</template><script setup>
import mixins from '../mixins/mixins.js';
let {num,fav,favBtn} =mixins()
</script><style lang="scss">
.A {font-size: 32px;
}
</style>