目錄

前言

父子組件

父?jìng)髯?/p>

子傳父

全局事件總線

什么叫全局事件總線

如何創(chuàng)建全局事件總線

如何在組件上獲取到這個(gè)全局vc對(duì)象

最常用的創(chuàng)建全局事件總線

兄弟組件

消息訂閱與發(fā)布

安裝

使用

爺孫組件

前言

在上篇文章我們介紹了父子組件之間的傳值通信，本文將介紹不僅限于父子組件之間的傳值通信，還包括兄弟組件、爺孫組件之間的通信傳值。以下方法暫未涉及到Vue3中新提供的方法

父子組件

父?jìng)髯?/h3>

在父組件中

給需要傳遞數(shù)值的子組件綁定屬性

<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配置項(xiàng)接收

<template>
 <div>
  姓名：{{ name }}
  年齡：{{ age }}
  性別：{{ gender }}
 </div>
</template>

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

傳遞成功，在頁(yè)面上成功渲染

以上介紹的是基本的而props配置項(xiàng)，props詳情配置項(xiàng)請(qǐng)看這篇文章

子傳父

在父組件中

@自定義事件名='回調(diào)函數(shù)'

<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>

也可以通過(guò)代碼來(lái)實(shí)現(xiàn)自定義事件綁定

在子組件用

ref='組件名'

在mounted鉤子函數(shù)中

this.$refs.ref定義的組件名.$on('自定義的事件名'，函數(shù))

<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('自定義事件名'，傳遞的數(shù)值)

將子組件中數(shù)值傳給父組件

傳遞成功

全局事件總線

什么叫全局事件總線

在介紹兄弟組件和爺孫組件前，先介紹全局事件總線

由上面的子組件向父組件傳遞數(shù)值可以得出

$on：是用來(lái)綁定事件的

$emit:是用來(lái)觸發(fā)事件的

例：

子組件向父組件傳遞數(shù)值

所以子組件使用的是$emit

父組件使用的是$on

而全局事件總線就是在所有的組件外面定義一個(gè)全局的vc對(duì)象，由上面的例子可得

不論是在父組件中用來(lái)綁定事件的$on前的

this.$refs.組件實(shí)例

還是在子組件中用來(lái)觸發(fā)事件的$emit前的

this

都是指向vc組件實(shí)例的，說(shuō)明vc實(shí)例身上是同時(shí)擁有$on和$emit的

此時(shí)我們定義一個(gè)全局的vc對(duì)象，所有的組件都可以共享

那么我們定義的這個(gè)全局的vc對(duì)象就叫做全局事件總線

如何創(chuàng)建全局事件總線

既然是創(chuàng)建全局事件對(duì)象，所以我們找到main.js文件

使用

vue.extend({})

創(chuàng)建構(gòu)造函數(shù)

再 new 一個(gè)vc實(shí)例對(duì)象

// 獲取VueComponent構(gòu)造函數(shù)
const VueComponent = Vue.extend({})
// 創(chuàng)建共享的vc對(duì)象
const globalvc = new VueComponent()

如何在組件上獲取到這個(gè)全局vc對(duì)象

利用vue的原型對(duì)象，vue做了特殊處理，vc也可以獲取到vue原型對(duì)象身上的屬性

vue.prototype.任意的屬性名=我們創(chuàng)建的vc對(duì)象

// 拓展原型對(duì)象的屬性
Vue.prototype.x=globalvc

// 獲取VueComponent構(gòu)造函數(shù)
const VueComponent = Vue.extend({})
// 創(chuàng)建共享的vc對(duì)象
const globalvc = new VueComponent()
// 拓展原型對(duì)象的屬性
Vue.prototype.x=globalvc

最常用的創(chuàng)建全局事件總線

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

兄弟組件

由上可知全局事件總線可以給任意的組件之間進(jìn)行通信

將MyBrother組件上的數(shù)據(jù)傳給兄弟組件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中的數(shù)值傳給MySon

<template>
  <div>
    <button @click="emit">發(fā)送</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數(shù)據(jù)

當(dāng)觸發(fā)自定義事件時(shí)，也就是將MyBrother組件中的數(shù)值傳過(guò)去

成功傳遞

消息訂閱與發(fā)布

與全局事件總線一樣可以在任何組件之間通信（但是不常用，建議用全局事件總線）

分為消息發(fā)布方和消息訂閱方

需要安裝js第三方庫(kù)

pubsub-js

pub:publish(發(fā)布)

sub:subscribe(訂閱)

安裝

npm i pubsub-js

使用

發(fā)布消息：

?pubsub.publish('自定義發(fā)布消息的名稱',發(fā)布的消息)

訂閱消息：

后接回調(diào)函數(shù)，第一個(gè)參數(shù)是自定義發(fā)布消息的名稱，第二個(gè)參數(shù)是發(fā)布的消息

? pubsub.subscribe('與發(fā)布消息自定義的名稱一致',function(messageName,message){}）

注意，在組件中使用時(shí)，需要先導(dǎo)入import

爺孫組件

在孫組件中

發(fā)布消息，將數(shù)據(jù)傳給爺爺組件

<template>
  <div>
    <button @click="think">發(fā)布消息</button>
  </div>
</template>

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

在爺爺組件中

在mounted鉤子函數(shù)中

<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('發(fā)布消息',function(messageName,message){
      console.log(messageName,message);
    })
  }
}
</script>

效果

成功傳遞了數(shù)據(jù)

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-751374.html

到了這里，關(guān)于Web前端 ---- 【vue】vue 組件傳值（props、全局事件總線、消息的訂閱與發(fā)布）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！