Vue data transfer--I have special implementation skills

This article mainly introduces some special sorting techniques for vue data transmission. Friends who need it can refer to it

Preface

Recently encountered There are more questions about vue's eventBus. When deciding on technology selection, I was also asked about the scope of use of vuex and eventBus. So just write it down. At the same time, there is a special implementation solution.

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

vuex

If you don’t introduce it, you will only look down if the data volume and complexity are not up to it.

props

demo

Parent and child components pass values, official api, just write a demo .

1. Parent component

<son :info="info" @update="updateHandler"/>
// data
info: &#39;sendToSon&#39;
// methods
updateHandler (newVal) {
 this.info = newVal
}

2. Child component

// props
props: ['info']
// 向上传值，某个方法中使用
this.$emit('update', 'got')

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

Restrictions

Parent and child components.

eventBus

demo

bus are all imported bus instances

// bus
const bus = new Vue()
// 数据接收组件
// 当前组件接收值则
bus.$on('event1', (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit('event1', val)

It can be seen that the essence is that a vue instance acts as a medium for event binding. Use it in all instances for data communication.

Two (multiple) parties use events with the same name to communicate.

Problem

1. When $emit, it must be $on, otherwise the event will not be monitored, that is to say There are certain simultaneous requirements for components. (Note: When routing is switched, the new routing component is created first, and then the old routing component is destroyed. In some cases, these two life cycles can be written separately, see this question).

2. $on will not automatically unbind after the component is destroyed. If the same component is generated multiple times, the event will be bound multiple times, and it will $emit once and respond multiple times. Additional processing.

3. The data is not "long-term" data and cannot be saved. It only takes effect after $emit.

So is there a more suitable solution?

Special eventBus?

demo

Let’s take a look at the code first, the online code. buses are all imported bus instances.

// bus
const bus = new Vue({
 data () {
  return {
   // 定义数据
   val1: ''
  }
 },
 created () {
  // 绑定监听
  this.$on('updateData1', (val)=>{
   this.val1 = val
  })
 }
})
// 数据发出组件
import bus from 'xx/bus'
// 触发在bus中已经绑定好的事件
bus.$emit('update1', '123')
// 数据接收组件

{{val1}}
// 使用computed接收数据
computed () {
 val1 () {
  // 依赖并返回bus中的val1
  return bus.val1
 }
}

##Different

1. The orthodox eventBus is only used Binding and triggering events do not care about the data and do not intersect with the data. This solution takes one more step to add data directly to the bus instance. And event monitoring and data addition need to be defined in advance.

2. The data receiver no longer uses $on to learn about data changes, but passively receives them through the characteristics of the calculated attributes.

Solution to the problem

Do communication components need to exist at the same time? The data is stored on the bus, so there are no requirements.

Bind multiple times? The binding monitors are all on the bus and will not be bound repeatedly.

Data is only available after $emit? Use calculated properties to directly read the value stored on the bus without triggering the event again.

Discuss

Why use calculated properties

In fact, it should be why it cannot be added directly to data, such as data1: bus .data1? We can look at another piece of code, online code. Change the bus to

data () {
 return {
  // 多一层结构
  val: {
   result: 0
  }
 }
},
created () {
 this.$on('update1', val => {
  console.log('触发1', i1++)
  this.val.result = val
 })
}

and change the data receiving component to

// template
data中获取直接修改值：{{dataResult}}
data中获取直接修改值的父层：{{dataVal}}
computed中依赖直接修改值：{{computedResult}}
// js
data () {
  return {
   // 获取直接修改值
   dataResult: bus.val.result,
   // 获取直接修改值的父层
   dataVal: bus.val
  }
 },
 computed: {
  computedResult () {
   // 依赖直接修改值
   return bus.val.result
  }
 }

to see , data that directly modifies the value obtained from data cannot respond dynamically.

Why use events

In fact, there is no need to

$emit to trigger, use bus.val = 1Direct assignment is also possible, so why not do it?

Simplified version of vuex

In fact, this eventBus is a simplified version of vuex. There is this passage in the vue documentation:

Components are not allowed to directly modify the state belonging to the store instance, but should execute actions to distribute (dispatch) events to notify the store to change. We finally reached the Flux architecture. The advantage of this agreement is that we can record all state changes that occur in the store.

store corresponds to the bus instance, state corresponds to data, action corresponds to the event, and dispatch corresponds to $emit. At the same time, the way components in vuex obtain data is through calculated properties, so in fact, it is not that difficult to understand and use the vuex and Flux architecture, right?

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing file upload with progress bar based on Ajax technology

Discuss the issues related to readyState and status in Ajax question

Comprehensive analysis of $.Ajax() method parameters (graphic tutorial)

The above is the detailed content of Vue data transfer--I have special implementation skills. For more information, please follow other related articles on the PHP Chinese website!