深圳网站公司招聘,企业网站建设一条龙,网站建设与网页设计实训报告,深圳市深企在线技术开发有限公司目录 1、组件的自定义事件1.1 绑定自定义事件#xff1a;1.1.1 第一种方式1.1.2 第二种方式1.1.3 自定义事件只触发一次 1.2 解绑自定义事件1.3绑定原生DOM事件1.4 总结 2、全局事件总线#xff08;GlobalEventBus#xff09;2.1 应用全局事件总线 3、 消息订阅与发布#… 目录 1、组件的自定义事件1.1 绑定自定义事件1.1.1 第一种方式1.1.2 第二种方式1.1.3 自定义事件只触发一次 1.2 解绑自定义事件1.3绑定原生DOM事件1.4 总结 2、全局事件总线GlobalEventBus2.1 应用全局事件总线 3、 消息订阅与发布pubsub3.1 应用消息订阅与发布 前言 组件之间通信的方式有很多种比如props、自定义事件、全局事件总线、消息订阅与发布、父链与子组件索引、插槽、Vuex等都可以实现组件之间的通信。在这里我将介绍以下三种通信方式。 1、组件的自定义事件
它是一种组件间通信的方式适用于子组件 父组件使用场景A是父组件B是子组件B想给A传数据那么就要在A中给B绑定自定义事件事件的回调在A中。
1.1 绑定自定义事件
1.1.1 第一种方式
在父组件中Demo dometest/或 Demo v-on:dometest/触发自定义事件this.$emit(dome,数据)
代码示例
app组件
templatedivh1 classtitle你好啊/h1Student dometest //div
/templatescript
import Student from ./components/Student;
export default {name: App,components: { Student },methods: {test() {console.log(我被触发了);},},
};
/scriptstyle scoped
/style
子组件student
templatediv classdemobutton clickdomes点我触发/button/div
/templatescript
export default {name: Student,methods: {domes() {this.$emit(dome);},},
};
/scriptstyle scoped
/style
1.1.2 第二种方式
在父组件中 Demo refxxx/......mounted(){this.$refs.xxx.$on(demo,this.test)}代码示例
app组件
templatedivh1 classtitle你好啊/h1!-- Student dome.oncetest / --Student refstudent //div
/templatescript
import Student from ./components/Student;
export default {name: App,components: { Student },methods: {test() {console.log(我被调用了);},},mounted() {this.$refs.student.$on(dome, this.test);},
};
/scriptstyle scoped
/style
子组件student
templatediv classdemobutton clickdomes点我触发/button/div
/templatescript
export default {name: Student,methods: {domes() {this.$emit(dome);},},
};
/scriptstyle scoped
/style 注意通过this.$refs.xxx.$on(dome,回调)绑定自定义事件时回调要么配置在methods中要么用箭头函数否则this指向会出问题 代码示例 mounted() {this.$refs.student.$on(dome, function() {console.log(this);this指向子组件student将普通函数换成箭头函数this指向就还是原来的app组件});},1.1.3 自定义事件只触发一次
若想让自定义事件只能触发一次可以使用once修饰符或$once方法。 代码示例
once修饰符使用方法
代码示例 app组件
templatedivh1 classtitle你好啊/h1Student dome.oncetest /!--绑定自定义事件一次性 --!-- Student refstudent / --/div
/templatescript
import Student from ./components/Student;
export default {name: App,components: { Student },methods: {test() {console.log(我被调用了);},},/* mounted() {this.$refs.student.$on(dome, this.test);}, */
};
/scriptstyle scoped
/style
$once使用方法
代码示例 app组件
templatedivh1 classtitle你好啊/h1!-- Student dome.oncetest / --Student refstudent //div
/templatescript
import Student from ./components/Student;
export default {name: App,components: { Student },methods: {test() {console.log(我被调用了);},},mounted() {this.$refs.student.$once(dome, this.test);//绑定自定义事件一次性},
};
/scriptstyle scoped
/style
1.2 解绑自定义事件
解绑自定义事件通过this.$off(atguigu)
代码示例 app组件
templatedivh1 classtitle你好啊/h1Student dometest dome2test2/!-- Student refstudent / --/div
/templatescript
import Student from ./components/Student;
export default {name: App,components: { Student },methods: {test() {console.log(我被调用了);},test2() {console.log(我是第二个事件);},},/* mounted() {this.$refs.student.$on(dome, this.test);}, */
};
/scriptstyle scoped
/style
子student组件
templatediv classdemobutton clickdomes点我触发/buttonbutton clickunbind点我解绑事件/button/div
/templatescript
export default {name: Student,methods: {domes() {this.$emit(dome);this.$emit(dome2);//绑定多个自定义事件},unbind() {// this.$off(dome)//解绑一个自定义事件// this.$off([dome,dome2])//解绑多个自定义事件this.$off()//解绑所有的自定义事}},
};
/scriptstyle scoped
/style
1.3绑定原生DOM事件
组件上也可以绑定原生DOM事件需要使用native修饰符。如果不加上native修饰符Vue会默认将此事件当作自定义事件。
代码示例 Student click.nativexxx/1.4 总结 一种组件间通信的方式适用于子组件 父组件 使用场景A是父组件B是子组件B想给A传数据那么就要在A中给B绑定自定义事件事件的回调在A中。 绑定自定义事件 第一种方式在父组件中Demo atguigutest/或 Demo v-on:atguigutest/ 第二种方式在父组件中 Demo refdemo/
......
mounted(){this.$refs.xxx.$on(atguigu,this.test)
}若想让自定义事件只能触发一次可以使用once修饰符或$once方法。 触发自定义事件this.$emit(atguigu,数据) 解绑自定义事件this.$off(atguigu) 组件上也可以绑定原生DOM事件需要使用native修饰符。 注意通过this.$refs.xxx.$on(atguigu,回调)绑定自定义事件时回调要么配置在methods中要么用箭头函数否则this指向会出问题
2、全局事件总线GlobalEventBus 一种组件间通信的方式适用于任意组件间通信。 安装全局事件总线 new Vue({......beforeCreate() {Vue.prototype.$bus this //安装全局事件总线$bus就是当前应用的vm},......
}) 使用事件总线 接收数据A组件想接收数据则在A组件中给$bus绑定自定义事件事件的回调留在A组件自身。 methods(){demo(data){......}
}
......
mounted() {this.$bus.$on(xxxx,this.demo)
}提供数据this.$bus.$emit(xxxx,数据) 最好在beforeDestroy钩子中用$off去解绑当前组件所用到的事件。
2.1 应用全局事件总线
我们利用全局事件总线来完成一个兄弟间的通信
目录结构图
代码示例
在main文件里面安装全局事件总线
//引入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() {Vue.prototype.$bus this //安装全局事件总线},
})没有涉及到和app组件通信所以app组件正常编写即可
templatediv classapph1{{msg}}/h1School/Student//div
/templatescriptimport Student from ./components/Studentimport School from ./components/Schoolexport default {name:App,components:{School,Student},data() {return {msg:你好啊,}}}
/scriptstyle scoped.app{background-color: gray;padding: 5px;}
/style
由于我们将school组件作为接受数据方所以我们要给school组件种的$bus绑定自定义事件事件的回调留在school组件自身。
templatediv classschoolh2学校名称{{name}}/h2h2学校地址{{address}}/h2/div
/templatescriptexport default {name:School,data() {return {name:东方,address:北京,}},mounted() {// console.log(School,this)this.$bus.$on(hello,(data){console.log(我是School组件收到了数据,data)})},beforeDestroy() {this.$bus.$off(hello)},}
/scriptstyle scoped.school{background-color: skyblue;padding: 5px;}
/style由于我们将student组件作为提供数据方所以我们要在student组件中调用自定义事件
templatediv classstudenth2学生姓名{{name}}/h2h2学生性别{{sex}}/h2button clicksendStudentName把学生名给School组件/button/div
/templatescriptexport default {name:Student,data() {return {name:张三,sex:男,}},mounted() {// console.log(Student,this.x)},methods: {sendStudentName(){this.$bus.$emit(hello,this.name)}},}
/scriptstyle langless scoped.student{background-color: pink;padding: 5px;margin-top: 30px;}
/style
3、 消息订阅与发布pubsub 一种组件间通信的方式适用于任意组件间通信。 使用步骤 安装pubsubnpm i pubsub-js 引入: import pubsub from pubsub-js 接收数据A组件想接收数据则在A组件中订阅消息订阅的回调留在A组件自身。 methods(){demo(data){......}
}
......
mounted() {this.pid pubsub.subscribe(xxx,this.demo) //订阅消息
}提供数据pubsub.publish(xxx,数据) 最好在beforeDestroy钩子中用PubSub.unsubscribe(pid)去取消订阅。
3.1 应用消息订阅与发布
将上面的全局事件总线案例应用消息订阅与发布的方法实现一下整体思路是一样的。
目录结构图 首先我们先要安装pubsubnpm i pubsub-js然后在需要通信的组件中引入import pubsub from pubsub-js这个包。
代码示例 main文件
//引入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),
})app组件
templatediv classapph1{{msg}}/h1School/Student//div
/templatescriptimport Student from ./components/Studentimport School from ./components/Schoolexport default {name:App,components:{School,Student},data() {return {msg:你好啊,}}}
/scriptstyle scoped.app{background-color: gray;padding: 5px;}
/style
school组件作为接受信息订阅方
templatediv classschoolh2学校名称{{name}}/h2h2学校地址{{address}}/h2/div
/templatescriptimport pubsub from pubsub-jsexport default {name:School,data() {return {name:东方,address:北京,}},mounted() {this.pubId pubsub.subscribe(hello,(msgName,data){console.log(this)// console.log(有人发布了hello消息hello消息的回调执行了,msgName,data)})},beforeDestroy() {pubsub.unsubscribe(this.pubId)},}
/scriptstyle scoped.school{background-color: skyblue;padding: 5px;}
/stylestudent组件作为发布信息方
templatediv classstudenth2学生姓名{{name}}/h2h2学生性别{{sex}}/h2button clicksendStudentName把学生名给School组件/button/div
/templatescriptimport pubsub from pubsub-jsexport default {name:Student,data() {return {name:张三,sex:男,}},mounted() {},methods: {sendStudentName(){pubsub.publish(hello,666)}},}
/scriptstyle langless scoped.student{background-color: pink;padding: 5px;margin-top: 30px;}
/style
