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

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

components: {"son"}

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

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

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

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

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

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

The child component passes data to the parent component

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

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

// 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

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

triggers the event 3. In component 2,

Listening events<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 2.在组件1里,触发emit increment(){ this.number++ this.$root.Bus.$emit(&amp;#39;eventName&amp;#39;, this.number) },</pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div></p> <p>The third communication method: using localStorage or sessionStorage<span style="color: #ff0000"><strong></strong></span>This communication is relatively simple, The disadvantage is that the data and status are chaotic and not easy to maintain. </p> <p>Pass </p>window.localStorage.getItem(key) <p>Get data<code>Pass

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:

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!