父给子传值 prop
1.在父组件里面，给子组件标签添加要传的值
<HelloWorld name="ls" :age="11" />
2.子组件听过prop接收(数组方式，或对象方式)
props: ["name",'age']
props:{
name: {
type: String,
required: true,
},
age:{
type: Number,
default:11
}
}
子给父 $emit ref 自定义事件
1.子组件发射事件
this.$emit("delObj", 参数);
2.在父组件接收
<Head @delObj="addTodo" />
function addTodo(参数){}
通过 ref
<Head ref="handCom" />
this.$refs.handCom.$on("delObj",()=>{})
事件总线：
一种组件间通信方式，适用于任意组件间通信
1. 在main.js 安装
第一种方式:
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
},
}).$mount('#app')
第二种方式：
Vue.prototype.$bus = new Vue() main.js
2.监听事件
this.$bus.$on('sendBus',($event) => {})
3.发布事件
this.$bus.$emit('sendBus', { ... pass some event data ...});
4.页面销毁解绑事件(解绑自定义事件,在监听页面解绑)
beforeDestroy() {
this.$bus.off("sendBus");
},
消息订阅与发布
一种组件间通信方式，适用于任意组件间通信
1.安装
npm i pubsub-js --> 消息订阅与发布所需库
2.在需要使用消息订阅与发布的地方使用订阅消息的组件（接收数据的组件）
import pubsub from "pubsub-js"
3. 页面挂载完成订阅消息
mounted() {
// 订阅消息 msg（消息名字）, data（参数）
this.pubId = pubsub.subscribe("hello", function (msg, data) {
console.log("有人发布消息了。", msg, data);
});
},
4. 发布消息
pubsub.publish("hello", 666);
5.卸载之前取消订阅
beforeDestroy() {
// 根据id取消订阅
pubsub.unsubscribe(this.pubId);
},
网友评论