[JavaScript知识库]Vue 访问 [ 根 父 子 ] 实例 和 依赖注入

实例就是一个对象,就是一个变量

访问根实例

通过 $root 所有后代子组件都可以访问 根实例

<根组件>	
	<子组件>
		<孙组件>
			{{$root.a}}	<!--在 孙组件 中访问 根实例 的a-->
		</孙组件>	<!--你可以当做组件内都有一个插槽 或 当做概念看一下,主要是表达任何组件都可以直接访问根实例-->   
	</子组件>
</根组件>

根实例的 $root === $root(本身)

访问父级组件实例

通过 $parent 可以让子组件访问当上一级的父实例

$parent	//父实例
$parent.$parent	//父实例 的 父实例
$parent.$parent.$parent	//父实例 的 父实例 的 父实例
//和 多叉树 一样, 父亲只有一个 , 可以直接锁定

根实例的 $parent 是 undefined

访问子组件实例或子元素

通过$refs.id访问,通过refattribute(属性),指定访问id
$refs访问的是一个 子实例的对象 集合 ,可以自己输出看看
当 ref 和 v-for 一起使用的时候, 你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组

<父模板>
	<子组件 ref="访问id"></子组件>
	<div ref="abc"></div>
</父模板>
--父实例函数区--
<script>//加个高亮
methods:{
	f:function (){
		this.$refs.访问id.a ;//在父模板中 访问 子实例 的a
		//当然你还可以这样
		this.$refs.访问id.$refs.访问id.$refs.访问id.a;//在父模板中 访问 子实例 中的 子实例 中的 子实例 中的a    
		//提前是得有那么多子实例,而且ref都等于"访问id
		this.$refs.abc;//当然你也可以访问 其他元素实例
	} 
}
</script>

为什么不在html中直接使用?

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”
——你应该避免在 模板或计算属性 中访问 $refs

也就是 渲染父组件的时候 , 子组件还未渲染 , 无法访问 , 只有当子组件渲染完后 ,在能使用

依赖注入

建议看官网:

https://cn.vuejs.org/v2/api/#provide-inject

仔细想想,一旦组件写好 , 父实例 永远是一个层的 ,例如:$parent.$parent访问 爷实例

这也是依赖注入的用武之地,它用到了两个新的实例选项: provide 和 inject
provide 选项允许我们指定我们想要提供给后代组件的 数据和方法
依赖注入是非响应式的

在祖先组件中写好provide选项

provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 值

provide:{
	aa:123
}

在后代组件中写好 inject 选项

inject:['aa']  //声明出来