vue接见元素&组件

接见根实例

在每一个new Vue实例的子组件中,其根实例能够经由过程$root属性举行接见。
例子:

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

一切的子组件都能够将这个实例作为一个全局store来接见或运用。

/ 猎取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 接见根组件的盘算属性
this.$root.bar

// 挪用根组件的要领
this.$root.baz()

注重:
关于demo或异常小型的有少许组件的运用来讲这是很轻易的。不过这个形式扩展到中大型运用来讲就不适宜了。因此在绝大多数情况下,我们强烈推荐运用Vuex来治理运用的状况。

接见父组件实例

和$root相似,$parent属性能够用来从一个子组件接见父组件的实例。它供应了一种时机,能够在后期随时触达父级组件,以替换将数据以prop的体式格局传入子组件的体式格局。
注重:

在绝大多数情况下,触达父级组件会使得你的运用更难调试和明白,尤其是当你变动了父级组件的数据的时刻。当我们稍后回看谁人组件的时刻,很难找出谁人变动是从那里提议的。

## 接见子组件实例或子元素 ##
只管存在prop和事宜,有的时刻你仍能够须要在Javascript里直接接见一个子组件。为了到达这个目标,你能够经由过程ref特征为这个子组件给予一个ID援用。比方:

<base-input ref="usernameInput"></base-input>

如今在你已定义了这个ref的组件里,你能够运用:

this.$refs.usernameInput

来接见这个 <base-input> 实例,以便不时之需。
当 ref 和 v-for 一同运用的时刻,你获得的援用将会是一个包含了对应数据源的这些子组件的数组。
注重:

$refs 只会在组件衬着完成以后见效,而且它们不是相应式的。这仅作为一个用于直接操纵子组件的“逃生舱”——你应当防止在模板或盘算属性中接见 $refs。

依靠注入

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

在这个组件里,一切<google-map>的子女都须要接见一个getMap要领,以便晓得要跟哪一个舆图举行交互。不幸的是,运用$parent属性没法很好的扩展到更深层级的嵌套组件上。这也是依靠注入的用武之地,它用到了两个新的实例属性:provide和inject。
provide选项许可我们指定我们想要供应给子女组件的数据/要领。在这个例子中,就是<google-map>内部的getMap要领:

provide(){
    return{
        getMap:this.getMap
    }
}

然后在任何子女组件里,我们都能够经由过程运用inject选项来吸收指定的我们想要增加在这个实例上的属性:

inject:['getMap']

比拟$parent来讲,这个用法能够让我们在恣意子女组件中接见getMap,而不须要暴露全部<google-map>实例。这许可我们更好的延续研发该组件,而不须要忧郁我们能够会转变/移除一些子组件依靠的东西。同时这些组件之间的接口是一直明白定义的,就和props一样。
先人组件不须要晓得哪些子女组件运用它供应的属性
子女组件不须要晓得被注入的属性来自那里
注重:

但是,依靠注入照样有负面影响的。它将你的运用以现在的组件构造体式格局耦合了起来,使重构变得越发难题。同时所供应的属性黑白相应式的。这是出于设想的斟酌,由于运用它们来建立一个中心化规模化的数据跟运用 $root做这件事都是不够好的。假如你想要同享的这个属性是你的运用特有的,而不是通用化的,或许假如你想在先人组件中更新所供应的数据,那末这意味着你能够须要换用一个像 Vuex 如许真正的状况治理计划了。
    原文作者:Lessong
    原文地址: https://segmentfault.com/a/1190000018591453
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞