vue实例访问元素&组件（2024-05-08）

最新推荐文章于 2024-09-09 11:08:24 发布

宝子卡粉

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量308

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/hap1994/article/details/138538440

版权

1、访问根实例

在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问。例如，在这个根实例中：

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

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

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

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

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

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

和 $root 类似，$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

var map = this.$parent.map || this.$parent.$parent.map

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：

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

现在在你已经定义了这个 ref 的组件里，你可以使用：

this.$refs.usernameInput 
this.$refs.usernameInput.focus() //函数

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。

这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

关注