Summary of vue data transfer methods

This time I will bring you a summary of the vue data transfer method. What are the precautions for vue data transfer? . The following is a practical case, let's take a look.

Preface

Recently I have encountered a lot of questions about vue’s eventBus. I was also asked when I was deciding on technology selection. The usage scope 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: 'sendToSon'
// methods
updateHandler (newVal) {
 this.info = newVal
}

2. Child component

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

Parent passes value to child-->props The child passes the value to the parent-->Sub-component bindingEventThe 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 a vue instance acting as an event Binding medium. 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 lifecycles 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 to bind and trigger events, and does not care about data. Intersect with 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 it by calculating the characteristics of 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
  }
 }

. You can see that the data that directly modifies the value cannot be dynamically responded to in the data.

Why use events

In fact, there is no need to $emit trigger, it is also possible to use bus.val = 1 to directly assign the value, so why not do this?

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 action to distribute (dispatch) events to notify the store to change. We finally achieved this 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?

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use JS to detect computer configuration (with code)

How to customize the opening and closing of the vue project eslint verification

The above is the detailed content of Summary of vue data transfer methods. For more information, please follow other related articles on the PHP Chinese website!