?简单记录下这个可以给后代组件传递参数的方法,主要是简单方便
官方文档点这里，提到了依赖注入这个方法的作用、优势和缺点有兴趣的可以自行研究，本文不赘述，只简单介绍、实现功能
创建项目
首先建个vue项目，为了方便展示直接在home页编写代码，分别写创建子、孙、曾孙三代组件并注册
目的是在初始组件里提供一个参数和一个方法，在不使用vuex和props的情况下传递到曾孙级组件使用
home页代码
通过provide提供要注入后代组件的内容，就像编写data数据一样，注意要写return
这里就是传递了home数据和clog方法，
后代组件在接受注入时，home即为home组件实例，可以在后代组件里控制台打印home验证，
clog方法在接受注入后可以直接使用
<template>
<div class="home">
<son></son>
</div>
</template>
<script>A
import son from '../components/son.vue'
export default {
name: 'Home',
data() {
return{
text:"这是初始组件的data数据文本"
}
},
components: {
son
},
//这里
provide(){
return{
home:this,
clog(){
console.log('这是初始组件方法运行结果');
}
}
}
}
</script>
子组件代码
<template>
<div class="son">
<h2>子组件</h2>
<grandson></grandson>
</div>
</template>
<script>
import grandson from './grandson.vue'
export default {
components:{
grandson
}
}
</script>
<style scoped="scoped">
.son{
border: 1px solid black;
}
</style>
孙组件代码
<template>
<div class="grandson">
<h3>孙组件</h3>
<greatgrandson></greatgrandson>
</div>
</template>
<script>
import greatgrandson from './greatgrandson.vue'
export default {
components:{
greatgrandson
}
}
</script>
<style scoped="scoped">
.grandson{
border: 1px solid dimgray;
}
</style>
曾孙组件代码
<template>
<div class="greatgrandson">
<h4>曾孙组件</h4>
<button @click="test">button</button>
</div>
</template>
<script>
export default {
inject:['home','clog'],
methods:{
test(){
console.log(this.home.text);
this.clog()
}
}
}
</script>
<style scoped="scoped">
.greatgrandson{
border: 1px solid darkgray;
}
</style>