vue如何访问元素和组件 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了vue如何访问元素和组件,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

访问根实例

在每个新vue实例的子组件中,其根实例可以通过美元根属性进行访问。
例子:

//vue根实例　　新Vue ({ 　　数据:{ 　　foo: 1 　　}, 　　计算:{ 　　酒吧:函数(){/*……*/} 　　}, 　　方法:{ 　　记者:函数(){/*……*/} 　　} 　　})

所有的子组件都可以将这个实例作为一个全局商店来访问或使用。

/获取根组件的数据　　root.foo美元这个。//写入根组件的数据　　美元的根。foo=2//访问根组件的计算属性　　root.bar美元这个。//调用根组件的方法　　。$ root.baz ()

注意:
对于演示或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不合适了。因此在绝大多数情况下,我们强烈推荐使用Vuex来管理应用的状态。

访问父组件实例

和美元根类似,美元的父母属性可以用来从一个子组件访问父组件的实例。它提供了一种机会,可以在后期随时触达父级组件,以替代将数据以道具的方式传入子组件的方式。
注意:

在绝大多数情况下,触达父级组件会使得你的应用更难调试和理解,尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候,很难找出那个变更是从哪里发起的。

# #访问子组件实例或子元素# #
尽管存在支撑和事件,有的时候你仍可能需要在Javascript里直接访问一个子组件。为了达到这个目的,你可以通过ref特性为这个子组件赋予一个ID引用例。如:

& lt;基本输入ref=皍sernameInput"祝辞& lt;/base-input>

现在在你已经定义了这个裁判的组件里,你可以使用:

。美元。参考文献usernameInput

来访问这个& lt; base-input>实例,以便不时之需。
当裁判和v代表一起使用的时候,你得到的引用将会是一个包含了对应数据源的这些子组件的数组。
注意:

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

依赖注入

& lt; google-map> 　　& lt; google-map-region v-bind:形状=癱ityBoundaries"比; 　　& lt; google-map-markers v-bind:地方=癷ceCreamShops"祝辞& lt;/google-map-markers> 　　& lt;/google-map-region> 　　& lt;/google-map>

在这个组件里,所有& lt; google-map>的后代都需要访问一个getMap方法,以便知道要跟哪个地图进行交互。不幸的是,使美元用父母属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地,它用到了两个新的实例属性:提供和注入。
提供选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中,就是& lt; google-map>内部的getMap方法:

提供(){ 　　返回{ 　　getMap: this.getMap 　　} 　　}

然后在任何后代组件里,我们都可以通过使用注入选项来接收指定的我们想要添加在这个实例上的属性:

注入:[& # 39;getMap& # 39;]

相比美元父母来说,这个用法可以让我们在任意后代组件中访问getMap,而不需要暴露整个& lt; google-map>实例。这允许我们更好的持续研发该组件,而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的,就和小道具一样。
祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里
注意:

然而,依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑,因为使用它们来创建一个中心化规模化的数据跟使美元用根做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的,而不是通用化的,或者如果你想在祖先组件中更新所提供的数据,那么这意味着你可能需要换用一个像Vuex这样真正的状态管理方案了。

感谢你能够认真阅读完这篇文章,希望小编分享vue如何访问元素和组件内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!