Discuss the method of calling parent-child methods in Vue

Vue is a very commonly used JavaScript framework. It builds user interfaces in a component-based manner, and in this process, communication between components is very important. In Vue, communication between parent components and child components can be achieved through props and events. This article will explore the way parent-child method calls are made in Vue.

In Vue, communication between parent and child components can be achieved through props and events. Props is an attribute, which is a method of passing data from parent component to child component. Events is an event, which is a method of sending messages from child components to parent components.

Below we will use an example to demonstrate how to call parent-child methods in Vue. First, we create a new subcomponent named "child.vue":

<template>
  <div>
    <button @click="onClickButton">点击调用父组件方法</button>
  </div>
</template>

<script>
  export default {
    methods: {
      onClickButton() {
      this.$emit('callParentFunc')
      }
    }
  }
</script>

In the subcomponent, we define a button and bind a click event. When the button is clicked, we trigger an event callParentFunc through this.$emit and pass an empty parameter. In this way, the child component sends a message out, and the parent component can call the child component's method by listening to this event.

Next, we receive this event in the parent component and call the method of the child component. In the parent component, we use the child component in the template and listen to its callParentFunc event, and bind an onChildClick method:

<template>
  <div>
    <h2>我是父组件</h2>
    <Child @callParentFunc="onChildClick"/>
  </div>
</template>

<script>
  import Child from './child.vue'
  export default {
    components:{Child},
    methods: {
      onChildClick() {
        console.log("调用子组件方法")
      }
    }
  }
</script>

As you can see, we use the child component in the template and listen to it. The callParentFunc event of the child component. At the same time, an onChildClick method is defined in methods. We can execute this method when the child component sends a message to the parent component.

Summary: Through the introduction of this article, we understand the way in which the parent-child method is called in Vue, that is, the child component triggers an event through this.$emit and sends a message to the outside, while the parent component listens to this After the event, you can call the method in the child component. This method is a very simple and practical way of communicating between parent and child components in Vue.

The above is the detailed content of Discuss the method of calling parent-child methods in Vue. For more information, please follow other related articles on the PHP Chinese website!