Vue非父子组件之间的通信方式详解

export default {
  components: {
    Home
  },
  // 通过provide将数据传出
	provide() {
		return {
			name: this.name,
			age: this.age,
			height: this.height
		}
	}
}

export default {
  inject: ["name", "age", "height"]
}

<template>
  <div class="app">
    <home />
    <h2>{{ name }}</h2>
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
  import Home from './Home.vue'

  export default {
    components: {
      Home
    },
    data() {
      return {
        name: "chenyq",
        age: 18,
        height: 1.88,
      }
    },
    // 通过provide将数据传出
    provide() {
      return {
        name: this.name,
        age: this.age,
        height: this.height
      }
    },
    methods: {
      btnClick() {
        this.name = "kaisa"
      }
    },
  }
</script>

import { computed } from 'vue'

export default {
  components: {
    Home
  },
  data() {
    return {
      name: "chenyq",
      age: 18,
      height: 1.88,
    }
  },
  // 通过provide将数据传出
  provide() {
    return {
      name: computed(() => this.name),
      age: this.age,
      height: this.name
    }
  },
  methods: {
    btnClick() {
      this.name = "kaisa"
    }
  },
}

<template>
  <div class="home-content">
    <h2>名字: {{ name.value }}, 年龄: {{ age}}, 身高: {{ height}}</h2>
  </div>
</template>

import { HyEventBus } from "hy-event-store";
const eventBus = new HyEventBus()
export default eventBus

<template>
  <div class="home-content">
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
  import eventBus from './utils/event-bus'

  export default {
    methods: {
      btnClick() {
        console.log("myEvent事件被监听")
				// 发送事件到事件总线上
        eventBus.emit("myEvent", "chenyq", 18, 1.88)
      }
    },
  }
</script>

<script>
  import eventBus from './utils/event-bus'
  import Home from './Home.vue'

  export default {
    components: {
      Home
    },
    created() {
			// 监听事件总线上的事件
      eventBus.on("myEvent", (name, age, height) => {
        console.log(name, age, height)
      })
    },
  }
</script>