How to use parent component methods in Vue

Vue.js is one of the most popular JavaScript frameworks in current web development. It has many powerful functions and mechanisms, the most commonly used of which is the use of components. In Vue, components can easily implement logical data binding and event response, but if you need to access the methods or data of the parent component in a child component, you may need to use some special techniques. This article will introduce how to use the parent component method in Vue.

1. Passing of parent component methods

In Vue, the methods and data of the parent component can be passed to the child component through component attributes (props). Suppose there is a parent component that contains a calculator button and a display area, as shown below:

<template>
  <div>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <div>{{ count }}</div>
    <child :increment="add"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    },
    sub() {
      this.count--
    }
  }
}
</script>

In the parent component, we define two methods add and sub, which are used to increase and decrease the counter respectively. The quantity count. At the same time, we created a child component Child and passed the parent component's method add as the attribute increment to the child component. In the child component, we can receive this property through props and forward it to the parent component through the $emit method.

<template>
  <div>
    <button @click="increment()">+1</button>
    <button @click="decrement()">-1</button>
  </div>
</template>

<script>
export default {
  props: {
    increment: {
      type: Function
    }
  },
  methods: {
    increment() {
      this.$emit('increment')
    },
    decrement() {
      this.$emit('decrement')
    }
  }
}
</script>

In the subcomponent, we define two methods increment and decrement, which are used to increase and decrease the number of counters respectively. At the same time, we received the attribute increment passed by the parent component through props, and used the $emit method to trigger the increment event in this method.

In this way, we realize the method transfer between components, that is, the child component can pass the event to the parent component through the emit method, and trigger the corresponding method in the parent component.

2. Calling parent component methods

In addition to passing parent component methods to child components through component attributes, in Vue you can also directly call parent component methods in child components. There is no need to trigger the event of the parent component through the emit method. Below we use a case to demonstrate how to directly call the method of the parent component in the child component.

Suppose we have a parent component that contains an editing area and a save button, and defines a method named save to save the contents of the editing area to the backend server. As shown below:

<template>
  <div>
    <textarea v-model="content"></textarea>
    <button @click="saveData">保存</button>
    <child :save-method="save"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    save() {
      // 将编辑区域内容保存到数据库中
    }
  }
}
</script>

In the parent component, we define a method named save and pass it to the child component Child as the attribute save-method.

In the child component, we can receive the attribute save-method passed by the parent component through props, and call the method directly when needed. As shown below:

<template>
  <div>
    <button @click="save()">保存</button>
  </div>
</template>

<script>
export default {
  props: {
    saveMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    save() {
      this.saveMethod()
    }
  }
}
</script>

In the child component, we receive the attribute save-method passed by the parent component through props, and call the method in the method. In this way, the function of directly calling the parent component method can be realized.

Summary

This article introduces how to use parent component methods in Vue, mainly including passing through component properties and directly calling parent component methods. In the Vue development process, information transfer between components is very important. If you flexibly use the component communication mechanism provided by Vue, you can achieve more efficient and flexible component development.

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