How to use $parent to access the parent instance in Vue

Vue is a popular front-end framework that often needs to handle communication between components during development. Sometimes, we need to access some properties of its parent component in a component to implement data sharing or other functions. In this case, we can use the $parent property provided by Vue to achieve this.

In Vue, each Vue component has a reference to its parent component. This reference can be accessed using this.$parent. We can use $parent in a child component to access the properties and methods of its parent component. The value of this property is a reference to the parent instance of the current component, so we can use this.$parent.data to access the data of the parent component just like accessing the data of the parent component.

When we need to trigger a method in the parent component under specific conditions in the child component, we can call it directly through $parent. This avoids writing too much code in child components and makes the code clearer.

The following is a simple example that demonstrates how to use $parent to access the parent instance in Vue:

<template>
  <div>
    <h1 id="parent-title">{{ $parent.title }}</h1>
    <button @click="$parent.changeTitle()">click me</button>
  </div>
</template>

<script>
export default {
  // 父组件传入title属性
  props: ['title'],
  methods: {
    changeTitle() {
      this.$emit('title-change', 'New Title'); // 触发父组件中的方法
    }
  }
}
</script>

In the above example, we use $parent in the child component to access the parent The title attribute in the component. At the same time, we also used $parent to call the method changeTitle() in the parent component. When this method is triggered, it triggers the custom event title-change in the parent component and passes it a new title.

To summarize, using $parent to access the parent instance in Vue is a convenient and efficient way. By using $parent, we can easily access the data and methods of the parent component in the child component, achieving data sharing and tight interaction between components.

The above is the detailed content of How to use $parent to access the parent instance in Vue. For more information, please follow other related articles on the PHP Chinese website!