目录
一，自定义事件
1 绑定事件
定义：子给父传递数据：通父组件给
子组件绑定自定义事件
简单来讲就是：子组件通过自定义事件给父组件传递数据
2 @ 或 v-on
3 代码展示 小案例
下面是父组件中的代码块
<template>
<div id="app">
<h1>{{msg}}</h1>
<hr />
<h2>班级信息：{{title}}</h2>
<!-- 从子组件中拿到数据 绑定事件（给子组件绑定一个事件getName showName是个回调函数） -->
<Person @getName="showName"/>
<!-- 当子组件调用这个自定义事件时（getName），就可以调用这个回调函数（showName） -->
</div>
</template>
<script>
import Person from './components/Person.vue';
export default {
name: 'app',
data() {
return {
title: 'web2209',
msg: '自定义事件'
}
},
components: {
Person
},
methods:{
showName(name){//这个参数是子组件传的值
console.log("App得到了姓名",name);
}
}
}
</script>
<style>
</style>
接下来是子组件的代码块
<template>
<div>
姓名：{{name}},年龄：{{age}}
<button @click="sendName">发送信息给父组件</button>
</div>
</template>
<script>
export default {
name: 'Person',
data() {
return {
name: '张三',
age: 19
}
},
methods: {//调用父组件中的自定义事件
sendName() {
this.$emit('getName',this.name)
}
},
}
</script>
<style>
</style>
效果图
二，全局事件总线
作用： 一种组件间通信的方式 适用于任意组件间通信。
1 安装
安装全局事件总线:在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用
。
new Vue({
render: h => h(App),
//给VM添加$bus
beforeCreate() {
Vue.prototype.$bus = this
}
}).$mount('#app')
2 组件的使用
给全局事件总线，绑定自定义事件getName 谁需要接收数据就再谁绑定。
子组件①：LiSi中
<template>
<div>
姓名:{{name}} 年龄:{{age}}
<button @click="sendName">发姓名到"张三"组件</button>
</div>
</template>
<script>
export default{
name:'LiSi',
data(){
return{
name:'李四',
age: 20
}
},
methods:{
sendName(){
this.$bus.$emit("getName",this.name)
}
},
mounted() {
this.$bus.$on("getAge",(age)=>{
console.log("李四组件得到的age:",age);
})
}
}
</script>
<style>
</style>子组件②：ZhangSan中
注意：组件销毁之前卸载自定义事件
<template>
<div>
姓名:{{name}} 年龄:{{age}}
<button @click="sendAge">发送年龄给"李四"组件</button>
<button @click="estroyGetName">销毁getName</button>
</div>
</template>
<script>
export default{
name:'ZhangSan',
data(){
return{
name:'张三',
age: 19
}
},
mounted() {
this.$bus.$on('getName',(name)=>{
console.log("张三组件得到的name:",name);
})
},
methods:{
sendAge(){
this.$bus.$emit("getAge",this.age)
},
estroyGetName(){
this.$destroy();
}
},
beforeDestroy() {
// console.log('正在销毁中.....');
this.$bus.$off();//销毁全部组件
// this.$bus.$off("getName");//销毁getName
// this.$bus.$off("getAge");//销毁getAge
}
}
</script>
<style>
</style>父组件中的代码块为
<template>
<div id="app">
<ZhangSan/>
<hr>
<LiSi/>
</div>
</template>
<script>
import ZhangSan from './components/ZhangSan.vue';
import LiSi from './components/LiSi.vue';
export default {
name: 'app',
data(){
return{
}
},
components:{
ZhangSan,
LiSi
}
}
</script>
<style>
</style>
三，订阅与发布
1，含义
一种组件间通信的方式，适用于任意组件间通信，如今有很多消息订阅与发布的包，在这里只介绍一种，pubsub-js。
2，安装 pubsub：npm i pubsub-js
3，发布消息 接收消息 取消订阅 将由下列代码展示
子组件①ClassInfor（班级信息）
<template>
<div>
班级：{{name}}
<button @click="send">发布信息</button>
</div>
</template>
<script>
// 引入: import pubsub from 'pubsub-js'
import pubsub from 'pubsub-js'
export default{
name:'ClassInfor',
data(){
return{
name:'web2209',
}
},
//发布
methods:{
send(){
pubsub.publish('name',this.name) //第一个参数为 发布消息的名称，第二个参数：为发布内容
}
}
}
</script>
<style>
</style>子组件② ZhangSan
<template>
<div>
姓名:{{name}} 年龄:{{age}}
<button @click="mydestroy">销毁组件</button>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default{
name:'ZhangSan',
data(){
return{
name:'张三',
age: 19
}
},
// 接收 来自班级信息中 发布的数据
mounted() {
this.mypubsub = pubsub.subscribe('name',(msg,data)=>{
console.log("班级信息：",data); //每次接收消息的时，会生成一个订阅的ID
} )
},
//销毁组件
beforeDestroy() {
pubsub.unsubscribe(this.mypubsub);
},
methods:{
mydestroy(){
this.$destroy();
}
}
}
</script>
<style>
</style>父组件
<template>
<div id="app">
<ClassInfor/>
<hr>
<ZhangSan/>
</div>
</template>
<script>
import ZhangSan from './components/ZhangSan.vue';
import ClassInfor from './components/ClassInfor.vue';
export default {
name: 'app',
data(){
return{
}
},
components:{
ZhangSan,
ClassInfor
}
}
</script>
<style>
</style>
版权声明：本文为qq_52499703原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。