How to pass data between Vue components?

The content of this article is to introduce how to transfer data between Vue components? Let everyone understand the data transfer between Vue components. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Parent component passes data to child components

In Vue, you can use props to pass data to child components.

Subcomponent part:

This is the HTML part of header.vue, logo is a variable defined in data.

If you need to get the value of the logo from the parent component, you need to use props: ['logo']

##After adding elements in props, there is no need to add variables in data

Parent component part:

When calling the component, use v-bind to bind the value of the logo to the variable logoMsg defined in App.vue

Then you can add it to App.vue The value of logoMsg is passed to header.vue:

2. The child component passes data to the parent component

Subcomponents mainly pass data to parent components through events

Subcomponent part:

This is the HTML part of login.vue. When

First declare a method setUser, and use the change event to call setUser

In In setUser,

$emit is used to traverse the transferUser event and return this.username

where transferUser is a custom event with a function similar to a transfer, this.username will pass this The event is passed to the parent component

Parent component part:

In the parent component App.vue, a method getUser is declared, and the getUser method is called with the transferUser event , get the parameter username

passed from the subcomponent. The parameter msg in the getUser method is the parameter username

passed from the subcomponent.

3. Subcomponents pass data to subcomponents

Vue does not have a direct method to pass parameters from subcomponent to subcomponent. It is recommended to pass data to subcomponents. Subcomponents are all merged into one component. If you must pass parameters from child to child, you can first pass them to the parent component and then to the child component.

In order to facilitate development, Vue has launched a state management tool Vuex, which can easily realize parameter transfer between components

The above is the detailed content of How to pass data between Vue components?. For more information, please follow other related articles on the PHP Chinese website!