Vue's methods of accessing elements and components (with examples)

The content of this article is about the method of accessing elements and components in Vue (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Accessing the root instance

In the subcomponent of each new Vue instance, its root instance can be accessed through the $root attribute.
Example:

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

All sub-components can access or use this instance as a global store.

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

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

// 访问根组件的计算属性
this.$root.bar
// 调用根组件的方法
this.$root.baz()

Note:
This is convenient for demos or very small applications with a small number of components. However, this model is not suitable for medium and large applications. Therefore, in most cases, we strongly recommend using Vuex to manage application state.

Accessing the parent component instance

Similar to $root, the $parent property can be used to access the instance of the parent component from a child component. It provides an opportunity to reach the parent component at any time later, instead of passing data into the child component in the form of props.
Note:

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

## Accessing subcomponent instances or subelements
##Despite the existence of props and events, sometimes you may still need to directly access a subcomponent in Javascript. To achieve this, you can assign an ID reference to the subcomponent through the ref attribute. For example:

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

Now in the component where you have defined this ref, you can use:

this.$refs.usernameInput

to access this instance for emergencies.
When ref is used with v-for, the reference you get will be an array containing these subcomponents of the corresponding data source.
Note:

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

Dependency Injection

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

In this component, all descendants of need to access a getMap method in order to know which map to interact with . Unfortunately, using the $parent attribute doesn't scale well to deeper nested components. This is where dependency injection comes in, using two new instance properties: provide and inject. The
provide option allows us to specify the data/methods we want to provide to descendant components. In this example, it is the getMap method inside :

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

Then in any descendant component, we can use the inject option to receive the specified content we want to add to this instance. Attributes:

inject:['getMap']

Compared with $parent, this usage allows us to access getMap in any descendant component without exposing the entire instance. This allows us to better continue developing the component without worrying that we might change/remove something that subcomponents depend on. At the same time, the interfaces between these components are always clearly defined, just like props.
The ancestor component does not need to know which descendant components use the properties it provides
The descendant component does not need to know where the injected properties come from
Note:

However, dependency injection still has negative effects . It couples your application with its current component organization, making refactoring more difficult. Also the properties provided are non-responsive. This is by design, because using them to create a centralized scale of data is not as good as using $root to do this. If the property you want to share is specific to your application rather than generic, or if you want to update the provided data in an ancestor component, then this means you may need to switch to a real one like Vuex State management solution.

This article is all over here. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column on the PHP Chinese website!

The above is the detailed content of Vue's methods of accessing elements and components (with examples). For more information, please follow other related articles on the PHP Chinese website!