Vue父子兄弟组件之间相互通信

一.父传子

父组件是使用 props 传递数据给子组件，

子组件可以使用 $emit,让父组件监听到自定义事件 。

父组件如下：

<template>
  <div id="app">

    <HelloWorld   v-bind:userinfo="users"></HelloWorld>




  </div>
</template>

<script>
 import HelloWorld from './components/HelloWorld.vue'




export default {
  name: 'App',
  data(){
    return{
//父组件的数组
      users:["henry","bucky","emily"]
    }
  },
 

  },
components:{
  HelloWorld
}
}
</script>

在子组件做操作

   <!-- 一定要用v-bind要不然就识别不到变量 -->

   <!-- 语法 <组件名 v-bind:变量名="该父组件下面的数组或者变量"> -->

子组件如下：

<template>
  <div class="hello">
    父子组件传递的数据如下
    <ul>
      <li v-for="(user, index) in userinfo" :key="index">{{ user }}</li>
    </ul>
   
  </div>
</template>

<script>
import axios from "axios";

export default {
  //props属性接收
  //   type:Array,类型限制
  //default如果没传数据过来，就显示默认值
  // required:true 必传值，不传就报错
  props: {
    userinfo: {
      type: Array,
      default() {
        return [];
      },
      required: true,
    },
  },
  name: "HelloWorld",

  data() {
    return {
    
    }
  },


</script>

props属性接收：

参数：

  //   type:Array,类型限制

  //default如果没传数据过来，就显示默认值

  // required:true 必传值，不传就报错

列如：

props: {

    父组件定义的变量: {

      type: Array,

      default() {

        return [];

      },

      required: true,

    },

二、子传父

$emit事件方式通过事件

子组件通过$emit发数据

 this.$emit("itemClick", this.commodity);

父组件接收

 <HelloWorld v-on:itemClick="hwclick"></HelloWorld>

 1.v-on监听子组件穿过来的事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

2.与子组件itemClick自定义事件保持一致 ="hwclick"这里就是父组件的方法，默认会传入数据

小结：子组件通过自定义事件调用方法，方法中向父组件发送自定义事件，
父组件接收自定义事件后执行方法

三、兄弟组件相互通信

bus用来传递非父子关系的数据
如两个子组件之间传递数据

通过自定义事件

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

子组件1发射数据

this.$bus.$emit("userinfo",param)

子组件2接收

    this.$bus.$on('userinfo',(users) =>{
//收到数据后赋值给组件中的变量
      this.userslist=users
})