访问 [ 根 , 父 , 子 ] 实例 和 依赖注入
实例就是一个对象,就是一个变量
访问根实例
通过 $root
所有后代子组件都可以访问 根实例
<根组件>
<子组件>
<孙组件>
{{$root.a}} <!--在 孙组件 中访问 根实例 的a-->
</孙组件> <!--你可以当做组件内都有一个插槽 或 当做概念看一下,主要是表达任何组件都可以直接访问根实例-->
</子组件>
</根组件>
根实例的 $root
=== $root
(本身)
访问父级组件实例
通过 $parent
可以让子组件访问当上一级的父实例
$parent //父实例
$parent.$parent //父实例 的 父实例
$parent.$parent.$parent //父实例 的 父实例 的 父实例
//和 多叉树 一样, 父亲只有一个 , 可以直接锁定
根实例的 $parent
是 undefined
访问子组件实例或子元素
通过$refs.id
访问,通过ref
attribute(属性),指定访问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'] //声明出来
响应式依赖注入
只需要把data里的,放到provide里就可
data (){return{
响应式:{}
}},
provide (){return{
响应式依赖注入:this.响应式
}}