How to implement component communication in vue-cli

This article mainly introduces the method of component communication in vue-cli. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This article introduces the method of component communication in vue-cli and shares it with everyone. The details are as follows:

There are three types of communication between vue components:

1. Parent component communicates with child component
2. Child component communicates with parent component
3. Same Communication between level components

1. Parent-to-child component communication

Take app.vue as the parent component, content. vue when a child component

1.Import the subcomponent in the parent component (subcomponent export)

import contents from './components/content';

2.Register the subcomponent in the parent component

  data() {
    return {
        test:'0'
    };
  },
  components:{
    'v-header':headers,
    'v-content':contents
  }

3.Subcomponent Receive data through props

<v-content :childs=&#39;test&#39;></v-content>

2. Communication between child and parent component

Child component:

<template>
  <p @click="down()"></p>
</template>

methods: {
  down() {
    this.$emit(&#39;down&#39;,&#39;null&#39;); //主动触发down方法，&#39;null&#39;为向父组件传递的数据
  }
}

Parent component:

<p>
  <child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法
</p>
methods: {
  changes(msg) {
    this.test= test;
  }
}

2. Non-parent-child component communication

//把a当作一个中转站
var a = new Vue();

Component 1 triggers:

<p @click="eve"></p>
methods:{
  eve(){
  a.$emit("change",&#39;null&#39;)
 }
}

Component 2 receives:

<p></p>
created(){
  a.$on(&#39;change&#39;,()=>{
    this.msg = &#39;null&#39;
  })
}

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

Related articles:

How to implement mobile adaptation in vue-cli

How to implement the display box in the Vue component Toast Effect

About rules parameter processing in webpack

How to implement simple calculations in AngularJS

The above is the detailed content of How to implement component communication in vue-cli. For more information, please follow other related articles on the PHP Chinese website!