vue依赖注入简述

目录

创建项目

home页代码

子组件代码

孙组件代码

曾孙组件代码

---

 简单记录下这个可以给后代组件传递参数的方法,主要是简单方便

官方文档点这里，提到了依赖注入这个方法的作用、优势和缺点有兴趣的可以自行研究，本文不赘述，只简单介绍、实现功能

创建项目

首先建个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>