父子组件及兄弟组件通信

老生常谈

父向子传递常用props、子向父传递常用$emit、兄弟之间常用eventBus

父组件App中

<template>
  <div id="app">
    <p>{{ count }}</p>
    <button @click="handleUp">+</button>
    <Home :count="count" @event-name="handleE" />
    <div>
      <About />
    </div>
  </div>
</template>


<script>
import Home from "./views/HomeView.vue";
import About from "./views/AboutView.vue";
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleUp() {
      this.count++;
    },
    handleE(data) {
      console.log(data);
    },
  },
  components: {
    Home,
    About,
  },
};
</script>

父组件App中有两个子组件Home和About

App中有一数据count，点击按钮即增加

其中

<Home :count="count" @event-name="handleE" />

前者为父向子传递 后者为子向父传递

子组件Home中

<template>
  <div class="home">
    {{ count }}
    <button @click="handleEmit">发送给App</button>
    <button @click="emitTo">发送给About</button>
  </div>
</template>

<script>
import eventBus from "../eventBus";

export default {
  props: {
    count: {
      type: Number,
    },
  },
  methods: {                
    handleEmit() {        //这是子向父传递
      this.$emit("event-name", "hello App");
    },
    emitTo() {            //这是兄弟之间传递
      eventBus.$emit("eventFromA", "hello About");
    },
  },
};
</script>

子组件About中

<template>
  <div class="about">
    <h1>{{ title }}</h1>
  </div>
</template>
<script>
import eventBus from "../eventBus";
export default {
  data() {
    return {
      title: "",
    };
  },
  mounted() {
    this.getEventData();
  },
  methods: {
    getEventData() {
      const that = this;       //此处that是全局vue的this，以防和eventBus中this弄混
      eventBus.$on("eventFromA", function (val) {
        that.title = val;
      });
    },
  },
  beforeDestroy() {
    eventBus.$off("eventFromA");        //记得销毁
  },
};
</script>

哦对了

eventBus可以直接用vue的

 

 结果如下

count是响应式数据

同时也传给了子组件Home，子组件也反馈了一句hello App

子组件Home也向兄弟组件  About  传递一句hello About

至此

  ——————————————————————————————————————————

从零开始的学习之路

一位刚刚转行的前端小白

欢迎大家来看我的主页