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

Discuss

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

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

Why use events

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

Simplified version of vuex

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!