How to pass values ​​between Vue parent and child components? Introduction to communication methods

Vue is a commonly used front-end development framework, and the componentization idea is the core of Vue. The core of the componentization idea is to split components into components to make complex components clearer and easier to maintain. What we want to do at this time is to communicate between these components. Passing methods from parent components to child components is an important technology. This article will introduce how to pass methods between Vue components, specifically from parent components to child components.

1. Transmitting methods from parent components

First of all, there are many ways for parent components to pass methods to child components in Vue. Let’s look at the simplest example first.

First, we define a method in the parent component:

methods: {
    hello(){
        console.log('hello');
    }
}

Next, we need to pass this method to the child component. In Vue, parent components can pass data and methods to child components through props.

In the parent component, we need to pass the method in the following way:

<child-component :hello="hello"></child-component>

In the child component, we need to receive the method passed by the parent component through props:

props: {
    hello: Function
}

Next, we need to call the method in the child component:

<button @click="hello()">Click me</button>

In this way, we can successfully call the method passed by the parent component in the child component.

2. Subcomponent passes methods to parent component

Next, we introduce how subcomponents pass methods to parent components. Compared with the way the parent component passes methods to the child component, this method is more complicated.

First, we define a method in the subcomponent:

methods: {
    send(){
        this.$emit('demo-event');
    }
}

Here, we define a send method, which triggers a named "demo-event" through $emit event. It should be noted that when we pass methods in Vue, we do not pass the function itself directly, but pass it through events.

Next, we need to listen to the event in the parent component. The specific code is as follows:

<child-component @demo-event="handleDemo"></child-component>

Here, we use @demo-event to listen to the "demo-event" triggered by the child component. event, and an event handling function handleDemo is defined in the parent component.

Next, we need to define the handleDemo method in the parent component:

methods: {
    handleDemo(){
        console.log('demo event received');
    }
}

In this way, when the send method is triggered in the child component, the "demo-event" event will be triggered and handleDemo will be executed. method.

3. Summary

Through the above two methods, we can pass methods between Vue components and complete communication to achieve component reuse and splitting of complex pages. In actual projects, we often use this method to communicate between components.

It should be noted that the way to pass methods in Vue is through events, which is also a very important concept in Vue componentization. At the same time, when using this method, you also need to pay attention to the names of the methods defined in the parent component and the child component to be the same to ensure that the event can be triggered successfully.

The above is the detailed content of How to pass values ​​between Vue parent and child components? Introduction to communication methods. For more information, please follow other related articles on the PHP Chinese website!