vue拜访元素和组件的办法（附示例）

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于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 这样真正的状态治理方案了。

本篇文章到这里就已经全部完毕了，更多其他出色内容可以关注PHP中文网的JavaScript教程视频栏目！

以上就是vue拜访元素和组件的办法（附示例）的具体内容，更多请关注百分百源码网其它相关文章！

打赏