Methods for communication between Vue sibling components

In projects, we often encounter situations where sibling components communicate. In large projects, we can easily manage communication issues between components by introducing vuex, but in some small projects, we do not need to introduce vuex. The following is a brief introduction to the method of using traditional methods to achieve communication between parent and child components. This article mainly introduces the communication method of Vue brother components (without using Vuex). The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Simple example: We click the button in component a and pass the information to component b, so that component b pops up.

The main idea is: First pass from son to father, then from father to son

First we pass it on in the a.vue component, Bind a handleClick event to the button botton. In the event, we use the this.$emit() method to trigger a custom event and pass our parameters.

In the example, we use this.$emit() to trigger the isLogFn method custom event and pass the log parameter out

a.vue

<template>
 <p class="ap">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </p>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit(&#39;isLogFn&#39;,&#39;log&#39;)
 }
 }
}
</script>

<style>
.ap{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

The second step is to listen to this custom event in the parent component, trigger the corresponding method, and accept the parameters passed by the a component. At this point we have completed the process of passing values ​​from the child component to the parent component.

In the example, listens to isLogFn to trigger the method lisLogFn we defined in the parent component, and gets the passed 'log' data. Complete the value transfer from son to father.

At this point, the whole process is not over yet, only half completed. Next, we need to complete the value transfer between the parent and child components and pass the information of component a to component b.

Bind the islog attribute in the < bPage > tag and dynamically bind the login field in data. After we get 'data' through the lisLogFn method, we need to judge the data passed by data. According to Determine the result to change the data in data(), thereby passing the data to the b component

App.vue

<template>
 <p id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </p>
</template>

<script>

import aPage from &#39;./components/a.vue&#39;
import bPage from &#39;./components/b.vue&#39;

export default {
 data () {
 return {
  login: &#39;false&#39;
 }
 },
 name: &#39;app&#39;,
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == &#39;log&#39;) {
  this.login = &#39;true&#39;
  }
 }
 }
}
</script>

<style>
</style>

Finally, the b component needs to be created props, define an isLog attribute, this attribute is the value we passed. We then process this data in a computed property, which is ultimately used by the b component. In the example, we use v-show="isLogin" to control whether the pop-up window is opened.

Remember! This props cannot be used directly. It must be processed by computed. The reason is that I quote the official vue description

One-way data flow

b.vue

<template>
 <p class="bp" v-show="isLogin">我是组件B弹窗</p>
</template>

<script>
export default {
 props: [&#39;isLog&#39;],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == &#39;true&#39;){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bp{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

Summary: If you want to implement value transfer between sibling components, you must first be familiar with the parent and child, and the value transfer between father and son.

Child and parent:

1. The child component needs to trigger a custom event in some way, such as a click event method

2. Put the value that needs to be passed as the second parameter of $emit, and the value will be passed as an actual parameter to the method that responds to the custom event

3. Register in the parent component Subcomponent and bind the listener for the custom event on the subcomponent tag

Parent and child:

1. The subcomponent creates a property in props , used to receive the value passed by the parent component

2. Add the attribute created in the subcomponent props to the subcomponent tag, and assign the value that needs to be passed to the subcomponent to the attribute

Related recommendations:

Detailed explanation of event bus non-parent-child component communication in vue

Vue.js component communication Detailed analysis of several postures

In-depth discussion of Vue.js components and component communication

The above is the detailed content of Methods for communication between Vue sibling components. For more information, please follow other related articles on the PHP Chinese website!