Vue学习笔记： provide与inject

在前几篇学习笔记里，接触到了props $eimt $parent $root 等方式实现父子组件间的数据传递方式，但是如果遇到层级很多的情况如何处理呢？

provide 和 inject 可以帮助我们解决这一问题。  一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

为组件后代提供数据，使用 provide() 函数。

使用 inject() 函数，注入上层组件提供的数据。

注意：数据相应是由Root到底层组件的，所以inject到子组件的数据如果要响应到provide需要用computed与相应方法组合使用。

演示代码

App.vue

<template>
    <Navbar></Navbar>
    <Tabbar />
</template>
<script>
import { computed } from 'vue';
import Navbar from './Navbar.vue';
import Tabbar from './Tabbar.vue'
export default {
    data() {
        return { navTitle: '首页' }
    },
    components: {
        Navbar, Tabbar
    },
    methods: {
        changeTitle(title) {
            this.navTitle = title
            console.log(this.navTitle)
        }
    },
    provide() {
        return {
            changeTitle: this.changeTitle,
            navTitle: computed(()=>this.navTitle)
        }
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}
</style>

Navbar.vue

<template>
    <div>
        <button>返回</button>
        <span>{{ navTitle }}</span>
        <button>首页</button>
    </div>
</template>
<script>
export default {
    inject:['navTitle']
}
</script>
<style scoped>
div {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    background: orange;
}
</style>

Tabbar.vue

<template>
    <ul>
        <TabbarItem v-for="data in datalist" :key="data" :item="data">{{ data }}</TabbarItem>
    </ul>
</template>
<script>
import TabbarItem from './TabbarItem.vue';
export default{
    data(){
        return{
            datalist:["首页","列表","我的"]
        }
    },
    components:{
        TabbarItem
    }
}
</script>

<style scoped>
ul{
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
}
li{
    flex:1;
    text-align: center;
}
</style>

TabbarItem.vue

<template>
    <li @click="handleClick">{{ item }}</li>
</template>
<script>
import App from './App.vue';

export default {
    props: ["item"],
    inject: ["changeTitle"],
    methods: {
        handleClick() {
            this.changeTitle(this.item)
         }
    }
}
</script>