学生姓名:{{ name }}
学生性别:{{ sex }}
计算器:{{num}}
计算器:{{num}}
生命周期图例:

子组件一:
学生姓名:{{ name }}
学生性别:{{ sex }}
export default {
name: "MyStudent",
data() {
return {
name: "张三",
sex: "男",
}
},
//添加点击事件 方法 通过$emit传出数据给兄弟组件MySchool(外部main.js组件 需要引入全局的数据)
methods:{
sendstudent() {
this.$bus.$emit('Hello',this.name)
}
}
};
.text{
background-color:pink;
width:100%;
height:150px;
padding:40px;
margin-top:50px;
}
子组件二:
学校名称:{{ name }}
学校地址:{{ address }}
export default {
name: 'MySchool',
data(){
return {
name:'尚硅谷',
address:'北京',
}
},
// 生命周期钩子接收者
mounted(){
// 第一个数据是函数名 第二个是传进来的数据 (外部main.js组件 需要引入全局的数据)
this.$bus.$on('Hello',(data)=>{
console.log('我是school组件,收到了数据',data)
})
},
//处理过后的数据进行解绑 解绑的是函数的名称
beforeDestroy(){
this.$bus.$off('Hello')
}
}
.table{
background-color:rgb(0, 217, 255);
width:100%;
height:150px;
padding:40px;
}
main.js文件

父组件:
{{msg}}
import MySchool from './components/MySchool.vue'
import MyStudent from './components/MyStudent.vue'
export default {
name: 'App',
data(){
return{
msg:'你好呀!'
}
},
components:{
MySchool,
MyStudent
}
}
.app {
background-color:#999;
width:100%;
height:700px;
}
全局总线总结:

该案例借用了全局总线的案例,所以修改部分会用特殊色彩字体显示
学校名称:{{ name }}
学校地址:{{ address }}
// 该pubsub是库 内部有很多方法 用于订阅消息
import pubsub from 'pubsub-js'
export default {
name: 'MySchool',
data(){
return {
name:'尚硅谷',
address:'北京',
}
},
// 生命周期钩子接收者
mounted(){
// 第一个数据是函数名 第二个是传进来的数据 (外部main.js组件 需要引入全局的数据)
// this.$bus.$on('Hello',(data)=>{
// console.log('我是school组件,收到了数据',data)
// })
//pubsub是方法.subscribe订阅 第一个参数是订阅地址名称 第二个是订阅后对方发布一个回调函数
//回调函数内跟两个参数,第一个参数返回来得是订阅人的名称 第二个参数返回的是对方发布的数据
this.pubsubId = pubsub.subscribe('hello',(msgName,data)=>{
//由于这里需要写this指向 所以这里必须写成箭头函数 若写成普通函数肯定会报错或者undefined
console.log('有人发布了hello数据,hello的回调函数执行了',msgName,data)
})
},
//处理过后的数据进行解绑 解绑的是函数的名称
beforeDestroy(){
// this.$bus.$off('Hello')
//取消订阅 由于获取不到pubsubId数据 所以只能在前加this才可以获取到
pubsub.unsubscribe(this.pubsubId);
}
}
.table{
background-color:rgb(0, 217, 255);
width:100%;
height:150px;
padding:40px;
}
学生姓名:{{ name }}
学生性别:{{ sex }}
// 该pubsub是库 内部有很多方法 用于订阅消息
import pubsub from 'pubsub-js'
export default {
name: "MyStudent",
data() {
return {
name: "张三",
sex: "男",
}
},
//添加点击事件 方法 通过$emit传出数据给兄弟组件MySchool(外部main.js组件 需要引入全局的数据)
methods:{
sendstudent() {
// this.$bus.$emit('Hello',this.name)
// pubsub库 方法 .publish发布 第一个是订阅人的名称 第二个是发布的数据
pubsub.publish('hello',666)
}
}
};
.text{
background-color:pink;
width:100%;
height:150px;
padding:40px;
margin-top:50px;
}
