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+=1
        fav.value=true
        setTimeout(()=>{
            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+=1
        fav.value=true
        setTimeout(()=>{
            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>