vue--day51--全局事件总线
1.main.js
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// const Demo=Vue.extend({})
// const d=new Demo();
// Vue.prototype.x=d;
// 创建Vue 实例对象--vm
new Vue({
//将 app 组件放入到容器中
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus=this // 安装全局事件总监
}
}).$mount('#app')
2.App.vue
<template>
<div class="app">
<h1>{{ msg }}</h1>
<Student></Student>
<School></School>
</div>
</template>
<script>
//样式的引入和这里有关系
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
name: 'App',
components: {
School,
Student,
},
data(){
return {
msg:'你好呀'
}
},
}
</script>
<style scoped>
.app{
background-color: brown;
}
</style>
3. School.vue
<template>
<!-- 组件的介绍 -->
<div class="school">
<h2>学校名称{{name}}</h2>
<h2>学校地址{{address}}</h2>
</div>
</template>
<script>
export default {
name:"School",
props:['receiveSchoolName'],
data() {
return {
name: "洛阳理工",
address: "洛阳"
};
},
mounted(){
console.log('school',this);
this.$bus.$on('hello',(data)=>{
console.log('我是school组件，我收到了数据',data)
})
},
beforeDestroy(){
this.$bus.$off('hello')
}
}
</script>
<style scoped>
/* 组件的样式 */
.school{
background-color:orange;
margin-top: 20px;
}
</style>
4. Student.vue
<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:'男',
}
},
methods:{
sendStudentName(){
this.$bus.$emit('hello',6666666)
}
}
}
</script>
<style scoped>
/* 组件的样式 */
.student{
background-color:cadetblue;
}
</style>
6. 总结
