Vue2 father to son, son to father and brother to each other

First create local components to complete the value transfer between them.

First, the parent component passes the value to the child component

Parent Component: Using propsproperties, the parent component passes data to the child component.

<template>
  <div id="app">
    <div>
      <son-boy :obj="obj" :arr="arr"></son-boy>
    </div>
  </div>
</template>

<script>
import SonBoy from "./components/SonBoy.vue";
export default {
  name: "App",
  data() {
    return {
      obj: {name: "张三",age: 22,sex: "男"},
      arr: [1, 2, 3, 4, 5],
    };
  },
  components: {
    SonBoy,
  },
};
</script>
<style></style>

Subclass component:

<template><!-- 父传子 -->
  <div>
    <h2>{
   
   { obj }}</h2>
    <h2>{
   
   {arr}}</h2>
  </div>
</template>
<script>
export default {
  name: "SonBoy",
  props: {
    obj:{
        type:Object
    },
    arr:{
        type:Array
    }
  },
};
</script>
<style scoped></style>

Second, the parent component passes the value to the child component

Subclass components: Subcomponents pass values ​​to parent components and use custom events $emit.

Define a method in the subcomponent , use $emit，'itemclick' as the event name and itemthe passed value.

<template> <!-- 子传父 -->
  <div>
    <button
      v-for="(item, index) in categoties"
      @click="hand(item)"
      :key="index"
    >{
   
   {item.name}}</button>
  </div>
</template>
<script>
export default {
  name: "SonBoder",
  data() {
    return {
      categoties: [
        {id: "aaa",name: "热门推荐"},
        {id: "bbb",name: "手机数码"},
        {id: "ccc",name: "家用家电"},
        {id: "ddd",name: "电脑办公"},
      ],
    };
  },
  methods: {
    hand(item) {
      this.$emit('ageItem',item)
    },
  },
};
</script>
<style scoped></style>

Parent group class:

<template>
  <div id="app">
    <div>
      <son-boder @ageItem="hanger"></son-boder>
    </div>
  </div>
</template>
<script>
import SonBoder from "./components/SonBoder.vue";
export default {
  name: "App",
  data() {
    return {
    };
  },
  methods: {
    hanger(item) {
      console.log(item.name);
    },
  },
  components: {
    SonBoder,
  },
};
</script>

<style>
</style>

 

3. Mutual transfer between subcomponents

Value transfer between brothers needs to be transferred by group bus.

Create a new bus.js to pass the intermediate medium.

import Vue from 'vue';
export default new Vue;

Create sibling 1:

<template>  <!-- 父传子 -->
  <div>
    <button @click="goWork" >传送</button>
  </div>
</template>
<script>
import bus from '@/common/bus'
export default {
  name: "SonBoy",
data(){
    return{
        msg:'我是兄弟'
    }
},
methods: {
    goWork(){
        bus.$emit('SonBoder',this.msg);
       }
   },
};
</script>
<style scoped></style>

Create another sibling to receive data:

 <template> <!-- 子传父 -->
  <div>
    {
   
   {str}}
  </div>
</template>
<script>
import bus from "@/common/bus";
export default {
  name: "SonBoder",
  data() {
    return {
      str: ""，
    };
  },
  mounted() {
    bus.$on("SonBoder",(data) => {
      this.str = data;
    });
  },
};
</script>
<style scoped></style>