Shulou(Shulou.com)05/31 Report--

This article focuses on "the method of communication between vue2.0 parent and son components". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the method of communication between vue2.0 and son components".

1. The parent component passes data to the child component

How is the parent component data passed to the child components? This can be achieved through the props property

Parent component:

/ / it is necessary to use-instead of hump data () {return {msg: [1pm 2pr 3]};}

Subcomponents receive data through props:

Method 1:

Props: ['childMsg']

Mode 2:

Props: {childMsg: Array / / this allows you to specify the passed-in type. If the type is incorrect, you will warn} props: {childMsg: {type: Array, default: [0Jing 0] / / so you can specify the default value}}.

In this way, it is realized that the parent component transfers data to the child component.

two。 The child component communicates with the parent component

So, what if the subcomponent wants to change the data? This is not allowed in vue, because vue only allows one-way data transmission, at this time, we can trigger custom events to notify the parent component to change the data, so as to change the child component data.

Use v-on to bind custom events

Each Vue instance implements the event interface (Events interface), that is:

Use $on (eventName) to listen for events

Trigger an event using $emit (eventName)

The parent component can use v-on to listen for events triggered by the child component directly where it is used.

Subcomponents:

Methods: {up () {this.$emit ('resultChange','hehe'); / / actively trigger the resultChange method.' hehe' is the data passed to the parent component}}

Parent component:

/ / listen for the upup event triggered by the subcomponent, and then call the change method methods: {mychangHandle (msg) {this.msg = msg;}}

The trigger event uses a custom event name in hump format, and you can listen in the form of on-evnet-name in the parent component.

3. Communication between any component

How do you communicate if the two components are not parent-child components? At this time, communication can be realized through eventHub.

The so-called eventHub is to create an event center, which is equivalent to a transit station, which can be used to transmit and receive events.

Use an empty Vue instance as the central event bus:

Let Hub = new Vue (); / / create an event center. Note that Hub should be placed globally.

Component 1 triggers:

Methods: {eve () {Hub.$emit ('change','hehe'); / / Hub trigger event}}

Component 2 receives:

Created () {Hub.$on ('change', () = > {/ / Hub receive event this.msg =' hehe';});} at this point, I believe you have a deeper understanding of "the method of communication between vue2.0 parent and son components". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.