目標(biāo): 掌握使用provide函數(shù)和inject函數(shù)完成后代組件數(shù)據(jù)通訊
使用場景: 有一個(gè)父組件,里面有子組件,里面有很多后太組件,共享父組件數(shù)據(jù)。
祖先組件 App.vue
<template>
<h1>父組件</h1>
<!-- <reactive></reactive> -->
<!-- <life /> -->
<!-- <toRefVue /> -->
<!-- <toRefsVue /> -->
<!-- <refVue></refVue> -->
<!-- <composeApiDemoVue></composeApiDemoVue> -->
<!-- <computedVue /> -->
<!-- <watchVue /> -->
<!-- <parentChidChatVue :msg="msg" @change-msg="changeMsg"/> -->
<provideInjectVue />
<!-- <button @click="changeMoney">修改money</button> -->
</template>
<script>
import {provide, ref} from 'vue'
import provideInjectVue from './components/provideInject.vue'
// import parentChidChatVue from './components/parentChidChat.vue'
// import computedVue from './components/computed.vue'
// import life from './components/life.vue'
// import reactive from './components/reactive.vue'
// import toRefVue from './components/toRef.vue'
// import toRefsVue from './components/toRefs.vue
// import watchVue from './components/watch.vue'
// import Ref_shuxing from './components/ref_shuxing.vue'
// import refVue from './components/ref.vue'
export default {
name: 'App',
components: {
// life
// reactive
// toRefVue
// refVue,
// computedVue
// Ref_shuxing
provideInjectVue
},
// 1.setup是一個(gè)新的組件選項(xiàng),作為組件中使用組合API的起點(diǎn)
// 2.從組件的生命周期來看,它的執(zhí)行在組件實(shí)例創(chuàng)建前`vue2.x的beforeCreate`執(zhí)行
// 3.這就意味著在setup函數(shù)中this還不是組件實(shí)例消请，此時(shí)是undefined。
// 4.在模板中需要使用的數(shù)據(jù)和函數(shù),需要在setup返回
setup(){
// 定義數(shù)據(jù)和函數(shù)
// console.log('setup',this)
// let msg = ref("hi vue3.0")
// const say = ()=>{
// console.log('我是方法');
// }
// function changeMsg(val){
// msg.value = val
// }
// return {
// msg,
// say,
// changeMsg
// }
// 將數(shù)據(jù)提供給后代組件 provide
const money = ref(100);
provide('money',money)
function changeMoney (val){
money.value -= val
}
// 將修改數(shù)據(jù)的方法提供給后臺組件 provide
provide('changeMoney',changeMoney)
return {
money
}
}
}
</script>
父組件 provideInject.vue
<template>
<div class="provideInject">
子組件 接收父組件的前{{money}}
<ProvideSon />
</div>
</template>
<script>
import { inject } from 'vue'
import ProvideSon from './provideSon.vue'
export default {
name:'provideInject',
components:{
ProvideSon
},
props:{
msg:{
type:String,
default:''
}
},
setup(){
// 接收組件組件提供的數(shù)據(jù)
const money = inject( 'money')
return {money}
}
}
</script>
孫組件 provideSon.vue
<template>
<div class="provideSon">
provideSon接收祖先組件 {{money}}
<button @click="changeMoney(20)">消費(fèi)20</button>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name:'provideSon',
setup(){
//1. inject獲取祖先組件傳遞的數(shù)據(jù)
const money = inject('money')
/*
如何修改money概说，然后通知App祖先組件石景。
不能直接修改數(shù)據(jù)，得遵循單向數(shù)據(jù)流原則沮榜，得通知父組件自改屈芜。
**/
//2. inject獲取組件組件傳遞的修改數(shù)據(jù)的方法
const changeMoney = inject('changeMoney')
return {money,changeMoney}
}
}
</script>
總結(jié)
- provide 函數(shù)提供數(shù)據(jù)和函數(shù)給后代組件使用郊愧。
- inject 函數(shù)給當(dāng)前組件注入provide提供的數(shù)據(jù)和函數(shù)。
