Vue data transmission-I have special implementation skills, vue transmission-skills

Vue data transmission-I have special implementation skills, vue transmission-skills

Preface

Recently, I encountered many questions about the eventBus of vue. I was also asked about the applicability of vuex and eventBus when I set the technology selection. So let's just write it down. There is also a special implementation scheme.

There are several data transmission methods, including vuex, props, eventBus, and special eventBus.

Vuex

I will not introduce it. You will not need to view the data volume and complexity.

Props

Demo

The Parent and Child components pass the value, the official api, only write a demo.

1. Parent component

<son :info="info" @update="updateHandler"/>// datainfo: 'sendToSon'// methodsupdateHandler (newVal) { this.info = newVal}

2. Child Components

// Propsprops: ['info'] // upload a value. this. $ emit ('update', 'got') is used in a method ')

The callback of a parent-to-child value --> props-to-parent value --> the event bound to the child component is defined in the parent component. The child component triggers this event. Because it is not recommended to directly modify the props passed in by the parent component in the child component, you need to use custom events.

Restrictions

Parent and Child components.

EventBus

Demo

Both are imported bus instances.

// Busconst bus = new Vue () // data receiving component // The current component receives the value bus. $ on ('event1', (val) =>{}) // data sending component // the value of the current component is bus. $ emit ('event1', val)

It can be seen that a vue instance acts as the medium for event binding. Use it to communicate data among all instances.

Dual (multiple) Parties use events of the same name for communication.

Problem

1. $ Emit must already have $ on; otherwise, events cannot be monitored. That is to say, there are certain requirements for components. (Note: During route switching, the new route component is created first, and the old route component is destoryed. In some cases, the two lifecycles can be written separately. For details, refer to this issue ).
2. $ On is not automatically unbound after the component is destroyed. If the same component is generated multiple times, the event is bound multiple times, and $ emit is returned multiple times, which requires additional processing.
3. Data is not "persistent" and cannot be saved. It takes effect only after $ emit.

So is there a more suitable solution?

Special eventBus?

Demo

Let's take a look at the code, online code. Both are imported bus instances.

// Busconst bus = new Vue ({data () {return {// define data val1: ''}, created () {// bind the listener this. $ on ('updatedata1 ', (val) => {this. val1 = val}) // data sending component import bus from 'xx/bus' // triggers the event bus that has been bound to the bus. $ emit ('update1 ', '20140901') // data receiving component {val1 }}// use computed to receive data computed () {val1 () {// dependency and return val1 return bus. val1 }}

Different

1. The orthodox eventBus is only used to bind and trigger events. It does not care about data and does not overlap with data. This solution adds data directly to the bus instance in one step. Event monitoring and data addition must be defined in advance.
2. The data receiver does not use $ on to learn about data changes, but passively receives data by calculating the features of the attribute.

Solved problems

Must communication components exist simultaneously? Data is stored on the bus, so there is no requirement.

Multiple bindings? The bound listening is on the bus and will not be bound again.

Is the data only available after $ emit? You can use the calculation property to directly read the value on the bus and do not need to trigger the event again.

Discussion

Why computing attributes?

Why can't I add data directly to data, such as data1: bus. data1? Let's look at another piece of code, online code. Modify bus

Data () {return {// multiple layers of structure val: {result: 0 }}, created () {this. $ on ('update1 ', val => {console. log ('trigger 1', i1 ++) this. val. result = val })}

The data receiving component is changed

// Obtain the direct modification value in templatedata: parent layer: {dataVal} computed on which the direct modification value is obtained in {dataResult} data: {computedResult }}// jsdata () {return {// get the direct modification value dataResult: bus. val. result, // obtain the parent-layer dataVal: bus. val }}, computed: {computedResult () {// directly modify the return bus dependency. val. result }}

As you can see, the data obtained from the data directly modifies the value cannot respond dynamically.

Why event?

Actually no$emitTrigger, usebus.val = 1Direct assignment is also possible, so why not do this?

Simplified vuex

In fact, this eventBus is a simplified version of vuex. The vue document contains the following:

The component does not allow direct modification of the state of the store instance, but should execute actions to distribute (dispatch) events to notify the store to change. We finally achieved the Flux architecture. The benefit of this Convention is that we can record state changes in all the stores.

Store corresponds to a bus instance, state corresponds to data, action corresponds to events, and dispatch corresponds to $ emit. At the same time, the vuex component obtains data through computing attributes, so the understanding and use of vuex AND Flux architecture is not that difficult, isn't it.

Summary

The above is a small series of vue data transmission-I have special implementation skills and hope to help you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!