vue的组件通信

vue的组件通信 （分为三种：父传子、子传父、兄弟组件通信）

父传子：

//在父页面
<template>
  <div class="">
    <child1 :sendData="brand" ></child1>
  </div>
</template>

<script>
import child1 from '../components/sona'
export default {
  data() {
    return {
      brand:'香奈儿',
    };
  },
  mounted() {},
  methods: {},
  components:{
    child1
  }
};
</script>

<style lang="scss"></style>

在子页面 用 props属性接受 数据

<template>
  <div class="">
    <h1>{{sendData}}</h1>
   
  </div>
</template>

<script>
export default {
  props:['sendData'],
  data() {
    return {

    };
  },
  mounted() {},
  methods: {

  },
};
</script>

<style lang="scss"></style>

子传父

父页面

<template>
  <div class="">
    <child1 @sendParent="doit" ></child1>
  </div>
</template>

<script>
import child1 from '../components/sona'
export default {
  data() {
    return {
    };
  },
  mounted() {},
  methods: {
    doit(e){
      console.log(e);
    }
  },
  components:{
    child1
  }
};
</script>

<style lang="scss"></style>

子页面

<template>
  <div class="">
   
  </div>
</template>

<script>

export default {
  data() {
    return {
      msg:'发送数据到父页面'
    };
  },
  mounted() {},
  methods: {
    sendParent(){
      this.$emit('sendParen',this.msg)
    },
  },
};
</script>

<style lang="scss"></style>

兄弟组件通信

1、创建一个空的vue实例eventBus
2、通过BUS.$emit{(}^{\prime }事件{名}^{\prime })传到空的vue实例中3、通过BUS.$on(‘事件名’(参数)=>{挂载从子传来的数据}),

首先你需要在main.js里挂在原型
在main.js

import Vue from 'vue' 

Vue.prototype.$eventBus= new Vue()

在子组件a

用 this.$Bus.$emit 接受

<template>
  <div class="">
      <h1>sona</h1>
      <button @click="send">向子组件b传送数据</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      msg: "sona--msg",
    };
  },
  mounted() {},
  methods: {
    send() {
      this.$Bus.$emit("sendb", this.msg);
    },
  },
};
</script>

<style lang="scss"></style>

在子组件b

用this.$Bus.$on 传值

<template>
  <div class="">
    <h1>sonb</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$Bus.$on("sendb", (msg) => {
      console.log(msg);
    });
    // 注册事件
  },
  methods: {},
};
</script>

<style lang="scss"></style>