Vue component communication (detailed tutorial)

This article mainly introduces you to four methods of Vue component communication, namely parent-child component communication, non-parent-child component eventBus communication, using localStorage or sessionStorage, and using Vuex. Friends in need can refer to it. Let’s study together below.

Preface

As we all know, vue is a mvvm framework. One of its biggest differences compared to jquery is that between components of communication. The focus of this article is to sort out the first two, parent-child component communication and eventBus communication. I think the instructions in the Vue document are still a bit simple, and I didn't understand them the first time.

• Communication of parent-child components

• EventBus communication of non-parent-child components

• Use local cache to implement Component communication

• Vuex communication

##The first communication method: parent-child component communication

Parent component passes data to child component

The parent component needs to do 4 things in total

1.

import son from './son .js' Introduce the sub-component son

2. Register all sub-component names in

components: {"son"}

3. In the parent component template applies sub-component,

4. If you need to pass data to the sub-component, write

 // 1.引入子组件 
 import counter from './counter'
 import son from './son'

// 2.在ccmponents里注册子组件
 components : {
 counter,
 son
 },

// 3.在template里使用子组件
 <son></son>

 // 4.如果需要传递数据,也是在templete里写
 <counter :num="number"></counter>

The sub-component only needs to do one thing

1. Use props to accept data, and you can use the data directly

2. The data received by the sub-component cannot be modified. If you really need to modify it, you can use calculated properties, or assign the data to a variable in the child component data

 // 1.用Props接受数据
 props: [
  'num'
  ],

// 2.如果需要修改得到的数据,可以这样写
 props: [
  'num'
 ],
 data () {
 return {
  number : this.num
 }
 },

The child component passes data to the parent component

Parent The component needs to do a total of 2 things

Define the event in the template

Write a function in methods to monitor the event triggering of the sub-component

// 1. 在templete里应用子组件时,定义事件changeNumber
 <counter :num="number"
   @changeNumber="changeNumber"
 >
 </counter>

// 2. 用changeNumber监听事件是否触发
 methods: {
  changeNumber(e){
  console.log('子组件emit了',e);
  this.number = e
  },
 }

The sub-component needs a total of 1 thing

After the data changes, use $emit to trigger it

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
 methods: {
  increment(){
   this.number++
   this.$emit('changeNumber', this.number)
  },
 }

Second communication method: eventBus##eventBus This communication method is aimed at communication between non-parent and child components. Its principle is still through event triggering and monitoring.

But because they are non-parent-child components, they need an intermediate component to connect.

I use it by defining a component that can be accessed by all components on the root component, which is the #app component. The specific usage is as follows

Using eventBus to pass data, we have a total of Three things need to be done

1. Add the Bus attribute to the app component (so that all components can access it through

this.$root.Bus

, and there is no need to introduce any files) 2. In component 1,

this.$root.Bus.$emit

triggers the event 3. In component 2,

this.$root. Bus.$on

Listening events<pre class='brush:php;toolbar:false;'>// 1.在main.js里给app组件,添加bus属性 import Vue from &amp;#39;vue&amp;#39; new Vue({ el: &amp;#39;#app&amp;#39;, components: { App }, template: &amp;#39;&lt;App/&gt;&amp;#39;, data(){ return { Bus : new Vue() } } })</pre><pre class='brush:php;toolbar:false;'>// 2.在组件1里,触发emit increment(){ this.number++ this.$root.Bus.$emit(&amp;#39;eventName&amp;#39;, this.number) },</pre><pre class='brush:php;toolbar:false;'>// 3.在组件2里,监听事件,接受数据 mounted(){ this.$root.Bus.$on(&amp;#39;eventName&amp;#39;, value =&gt; { this.number = value console.log(&amp;#39;busEvent&amp;#39;); }) },</pre>

The third communication method: using localStorage or sessionStorageThis communication is relatively simple, The disadvantage is that the data and status are chaotic and not easy to maintain.

Pass

window.localStorage.getItem(key)

Get dataPass

window.localStorage.setItem(key,value)

Store data

Note: Use JSON.parse() / JSON.stringify() for data format conversion.

The fourth communication method: using VuexVuex is more complicated, you can write a separate article

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

Related articles:

Use SpringMVC to solve vue cross-domain requests

New features of webpack 4.0.0-beta.0 version (details Tutorial)

How to implement value passing and communication in vue2.0 components

The above is the detailed content of Vue component communication (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!