VUE3.0,DAY52，全局事件总线

组件间通信第一种写法

可以实现任意组件间的通信，所有的组件都能看的见该事件，我们在main.js中，即自定义组件外有一个x事件，代码如下：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//x事件
window.x = { a: 1, b: 2 }
//创建vm
new Vue({
	el: '#app',
	render: h => h(App),
})

然后在school.vue中引用

<template>
  <div class="student">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  mounted() {
    console.log('student',window.x);
  },
};
</script>

<style  scoped>
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
}
</style>

最后发现该事件成功的被响应了。

第二种写法

在main.js中代码，我们必须把x事件放在vue原型对象上。

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//全局事件x
Vue.prototype.x = { a: 1, b: 2 }
//创建vm
new Vue({
	el: '#app',
	render: h => h(App),
})

school上代码就是打印输出this.x。

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京",
    };
  },
  mounted() {
    console.log('school',this.x);
  },
};
</script>

<style scoped>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>

调用一些$on、$off、$emit等

这些符号都在组件的vue原型对象上，所以可以这样调用，在main.js上创建全局事件总线，然后在各个自定义组件内调用，随后我们还实现了同级组件间的通信。

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el: '#app',
	render: h => h(App),
	beforeCreate() {
		//安装全局事件总线$bus
		Vue.prototype.$bus = this
	}
})

<template>
  <div class="student">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <button @click="sendStudentName">把学生名给school组件</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  mounted() {
    // console.log("student", this);
  },
  methods: {
    //触发$bus中的你好事件
    sendStudentName() {
      this.$bus.$emit("你好",666);
    },
  },
};
</script>

<style  scoped>
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
}
</style>

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京",
    };
  },
  mounted() {
    //调用$on,给this.$bus绑定了一个名为你好的事件
    this.$bus.$on("你好", (data) => {
      console.log("我是school组件，收到了数据", data);
  },)}
};
</script>

<style scoped>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>

输出效果如下：点击按钮，就实现了同级组件参数传递。

总结