vue的组件通信(父传子，子传父，兄弟通信)

前言：

首先我们得了解子组件，组件是页面的一部分，可以理解成为封装的html子组件和放在views底下的区别：页面在坑里加载，而子组件是页面的一部分

方法一：父组件向子组件传值

首先在使用子组件的标签上写一个 自定义属性 属性的值就是要传递的值到了子组件 用props接收 是一个数组，注意不要忘了加“”，props接收到的数据跟data 的用法是一样的

我们来一个最简单的例子：

父组件

//父组件
<template>
  <div class="">
    <div:aaa="msg"></div>
    //首先就是在我们的标签上写一个自定义属性，而这个自定义属性定义的msg在下面data中定义了值
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "111",
    };
  },
  mounted() {},
  methods: {},
  components: {
   
  },
};
</script>
<style lang="scss"></style>

子组件

<template>
  <div class="">
    <h5>这是一个子组件</h5>
    接收到的父组件的数据是：
    {{ aaa }}
  </div>
</template>

<script>
export default {
  props: ["aaa"],
  //   props如果不需要识别格式就直接写成数组 如果需要识别格式就写成对象
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss"></style>

方法二：子组件向父组件传值

在父组件中给子组件添加自定义事件，然后在子组件中通过$emit（‘事件名’, ‘要传递的数据’）触发函数并传递数据给父组件

子组件

// 子组件
<template>
<div>
  <span>{{childValue}}</span>
  <!-- 定义一个子组件传值的方法 -->
  <input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子组件的数据'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

父组件

// 父组件
<template>
 <div>
  <span>{{name}}</span>
  <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
  <child @childByValue="childByValue"></child>
</div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue(childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

方法三：兄弟通信

通过bus实现，给vue原型上挂载一个new Vue（）的实例作为bus 可以通过 bus.$emit{（}^{\prime }要触发的事{件}^{\prime }{,}^{\prime }要传递的数{据}^{\prime }）,在要接受数据的页面通过bus.$on()接收数据

1.初始化，全局创建 $bus
直接在项目中的 main.js 初始化 $bus :

window.$bus=new Vue();

2. 发送事件

$ bus.$emit(“aMsg”, ‘来自A页面的消息’)

<!-- A.vue -->
<template>
   <button @click="sendMsg()">-</button>
</template>

<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '来自A页面的消息');
   }
 }
}; 
</script>

3.接收事件

$bus. $on(“事件名”,callback)

<!-- IncrementCount.vue -->
<template>
 <p>{{msg}}</p>
</template>

<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // A发送来的消息
     this.msg = msg;
   });
 }
};
</script>