首页 前端知识 Web前端 ---- 【vue】vue 组件传值(props、全局事件总线、消息的订阅与发布)

Web前端 ---- 【vue】vue 组件传值(props、全局事件总线、消息的订阅与发布)

2024-05-05 22:05:42 前端知识 前端哥 54 749 我要收藏

目录

前言

父子组件

父传子

子传父

全局事件总线

什么叫全局事件总线

如何创建全局事件总线

如何在组件上获取到这个全局vc对象

最常用的创建全局事件总线

兄弟组件

消息订阅与发布

安装

使用

爷孙组件


前言

在上篇文章我们介绍了父子组件之间的传值通信,本文将介绍不仅限于父子组件之间的传值通信,还包括兄弟组件、爷孙组件之间的通信传值。以下方法暂未涉及到Vue3中新提供的方法

父子组件

父传子

在父组件中

给需要传递数值的子组件绑定属性

<template>
  <div id="app">
    <MySon name="zs" age=20 gender="男"></MySon>
    
  </div>
</template>

<script>
import MySon from './components/MySon.vue'

export default {
  name: 'App',
  components: {
    MySon
  }
}
</script>

在子组件中

使用props配置项接收

<template>
 <div>
  姓名:{{ name }}
  年龄:{{ age }}
  性别:{{ gender }}
 </div>
</template>

<script>
export default {
  name:'MySon',
  props:['name','age','gender']
}
</script>

传递成功,在页面上成功渲染

以上介绍的是基本的而props配置项,props详情配置项请看这篇文章

子传父

在父组件中

@自定义事件名='回调函数'

<template>
  <div id="app">
    <MySon  @event1="think"></MySon>
    
  </div>
</template>

<script>
import MySon from './components/MySon.vue'

export default {
  name: 'App',
  components: {
    MySon
  },
  methods:{
    think(name,age,gender){
      console.log(name,age,gender);
    }
  }
}
</script>

也可以通过代码来实现自定义事件绑定

在子组件用

ref='组件名'

在mounted钩子函数中

this.$refs.ref定义的组件名.$on('自定义的事件名',函数)

<template>
  <div id="app">
    <MySon  ref="MySon"></MySon>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'

export default {
  name: 'App',
  components: {
    MySon
  },
  methods:{
    think(name,age,gender){
      console.log(name,age,gender);
    }
  },
  mounted(){
    this.$refs.MySon.$on('event1',this.think)
  }
}
</script>

在子组件中

this.$emit('自定义事件名',传递的数值)

将子组件中数值传给父组件

传递成功

全局事件总线

什么叫全局事件总线

在介绍兄弟组件和爷孙组件前,先介绍全局事件总线

由上面的子组件向父组件传递数值可以得出

$on:是用来绑定事件的

$emit:是用来触发事件的

例:

子组件向父组件传递数值

所以子组件使用的是$emit

父组件使用的是$on

全局事件总线就是在所有的组件外面定义一个全局的vc对象,由上面的例子可得

不论是在父组件中用来绑定事件的$on前的

this.$refs.组件实例

还是在子组件中用来触发事件的$emit前的

this

都是指向vc组件实例的,说明vc实例身上是同时拥有$on和$emit的

此时我们定义一个全局的vc对象,所有的组件都可以共享

那么我们定义的这个全局的vc对象就叫做全局事件总线

如何创建全局事件总线

既然是创建全局事件对象,所以我们找到main.js文件

使用

vue.extend({})

创建构造函数

再 new 一个vc实例对象

// 获取VueComponent构造函数
const VueComponent = Vue.extend({})
// 创建共享的vc对象
const globalvc = new VueComponent()

如何在组件上获取到这个全局vc对象

利用vue的原型对象,vue做了特殊处理,vc也可以获取到vue原型对象身上的属性

vue.prototype.任意的属性名=我们创建的vc对象

// 拓展原型对象的属性
Vue.prototype.x=globalvc

// 获取VueComponent构造函数
const VueComponent = Vue.extend({})
// 创建共享的vc对象
const globalvc = new VueComponent()
// 拓展原型对象的属性
Vue.prototype.x=globalvc

最常用的创建全局事件总线

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

兄弟组件

由上可知全局事件总线可以给任意的组件之间进行通信

将MyBrother组件上的数据传给兄弟组件MySon

在MySon组件中

<template>
 <div>
  <button @click="think2()">传递</button>
 </div>
</template>
<script>
export default {
  name:'MySon',
  data(){
    return {
      name:'haha',
      age:18,
      gender:'女'
    }
  },
  mounted(){
    this.x.$on('event2',this.think3)
  },
  methods:{
    think2(){
      this.$emit('event1',this.name,this.age,this.gender)
    },
    think3(name,age,gender){
     this.name=name
     this.age=age
     this.gender=gender
    }
  }
}
</script>

在MyBrother组件中

将data中的数值传给MySon

<template>
  <div>
    <button @click="emit">发送</button>
  </div>
</template>

<script>
export default {
   name:'MyBrother',
    data(){
        return {
            name:'兄弟',
            age:20,
            gender:'男'
        }
    },
    methods:{
        emit(){
            this.x.$emit('event2',this.name,this.age,this.gender)
        }
    }
}
</script>

原MySon中的data数据

当触发自定义事件时,也就是将MyBrother组件中的数值传过去

成功传递

消息订阅与发布

与全局事件总线一样可以在任何组件之间通信(但是不常用,建议用全局事件总线)

分为消息发布方和消息订阅方

需要安装js第三方库

pubsub-js

pub:publish(发布)

sub:subscribe(订阅)

安装

npm i pubsub-js

使用

发布消息:

 pubsub.publish('自定义发布消息的名称',发布的消息)

订阅消息:

后接回调函数,第一个参数是自定义发布消息的名称,第二个参数是发布的消息

  pubsub.subscribe('与发布消息自定义的名称一致',function(messageName,message){})

注意,在组件中使用时,需要先导入import

爷孙组件

在孙组件中

发布消息,将数据传给爷爷组件

<template>
  <div>
    <button @click="think">发布消息</button>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    name:'GrandSon',
    data(){
        return {
            msg:'消息发布成功'
        }
    },
    methods:{
        think(){
            pubsub.publish('发布消息',this.msg)
        }
    }
}
</script>

在爷爷组件中

在mounted钩子函数中

<template>
  <div id="app">
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
import GrandSon from './components/GrandSon.vue';
export default {
  name: 'App',
  components: {
    GrandSon
  },
  mounted(){
    pubsub.subscribe('发布消息',function(messageName,message){
      console.log(messageName,message);
    })
  }
}
</script>

效果

成功传递了数据

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7086.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!