??vue基礎(chǔ)學(xué)習(xí)-組件 介紹了嵌套組件間父子組件通過 props 屬性進(jìn)行傳參。子組件傳遞數(shù)據(jù)給父組件通過 $emit() 返回自定義事件，父組件調(diào)用自定義事件接收子組件返回參數(shù)。

??vue進(jìn)階-vue-route 介紹了路由組件傳參，兩種方式：params傳參 和 query 傳參。

本章介紹組件間通信：?vue消息的訂閱與發(fā)布?

簡介

• 消息的訂閱與發(fā)布（PubSub.js）適用于：任何組件間通信。
• PubSub 可以在 Vue 任意組件間進(jìn)行傳值，無需要進(jìn)行中間層層傳遞。
• 使用的模式是觀察者模式：生產(chǎn)者拋出，消費(fèi)者接收。

1. 入門

1.1 安裝

npm i pubsub-js

1.2 引入 pubub

import pubsub from 'pubsub-js'

1.3 發(fā)布

pubsub.publish('消息名稱', 發(fā)布的數(shù)據(jù))

1.4 訂閱

pubsub.subscribe('消息名稱', 回調(diào)函數(shù))

• subscribe()方法會返回訂閱消息對應(yīng)的 ID。
• 回調(diào)函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為消息名稱，第二個(gè)參數(shù)為傳遞過來的數(shù)據(jù)。
• 回調(diào)函數(shù)，不建議使用普通匿名函數(shù)，因?yàn)榈谌綆旌?vue 不一樣，不保證函數(shù)中的 this 指向 vue 實(shí)例或組件實(shí)例對象。建議使用箭頭函數(shù)或者 將普通函數(shù)寫在 methods 配置項(xiàng)中。

第一種方式：

mounted() {
	this.pid = pubsub.subscribe('xxx', (msgName, data)=>{...})
}

第二種方式：

methods: {
	demo(msgName, data){...}
},
mounted() {
	this.pid = pubsub.subscribe('xxx', this.demo)
}

1.5 取消訂閱

beforeDestroy() {
    pubsub.unsubscribe(this.pid)
}

beforeDestroy 鉤子函數(shù)中，調(diào)用pubsub.unsubscribe取消訂閱。

2. 示例

首先，我們先復(fù)習(xí)下嵌套組件間父子組件傳值。

??1、新增子組件 ComponentA

<template>
    This is ComponentA, title = {{title}}, userName = {{userName}}
</template>
<script>
export default {
    props: ['title','userName']
}
</script>

子組件通過 props: ['title','userName'] 顯式聲明它所接受的屬性 title、userName。

??2、新增父組件 FuComponent

<template>
    <component-a :title="title" :userName="userName"></component-a>
</template>

<script>
import ComponentA from '@/components/ComponentA.vue'

export default {
    components: { ComponentA },
    data() {
        return {
            title: 'google',
            userName: 'Jack'
        }
    }
}
</script>

父組件在 data 中動態(tài)賦值 title、userName 。

??3、router/index.js配置路由

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: '/fuComponent',
        component: () => import("@/components/FuComponent.vue")
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

??4、App.vue 中使用路由

<template>
  <router-link to="/fuComponent">父子組件參數(shù)傳遞</router-link><br />
  <hr />
  <router-view></router-view>
</template>
<script setup>
 
</script>

??5、測試

3. 發(fā)布訂閱模式改造

??1、子組件 ComponentA 發(fā)布訂閱

<template>
    This is ComponentA, title = {{title}}, userName = {{userName}}
</template>

<script>
import pubsub from "pubsub-js";

export default {
    data() {
        return {
            title: '',
            userName: ''
        }
    },
    mounted() {
        this.pid = pubsub.subscribe('test', (msgName, data )=> {
            console.log('有人發(fā)布了 test , test 消息的回調(diào)執(zhí)行了', msgName, data);
            this.title = data.title;
            this.userName = data.userName;
        })
    },
    beforeDestroy() {
        pubsub.unsubscribe(this.pid)
    }
}
</script>

??2、新增父組件 FuComponent

<template>
  <component-a></component-a>
  <br />
  <button @click="send">點(diǎn)擊發(fā)布消息</button>
</template>

<script>
import ComponentA from '@/components/ComponentA.vue'
import pubsub from "pubsub-js";

export default {
    components: { ComponentA },
    methods: {
        send() {
            let sendData = {
                title: "google",
                userName: "Jack"
            };
            pubsub.publish("test", sendData);
        }
    }
};
</script>

??3、測試

??點(diǎn)擊訪問 “http://localhost:8080/fuComponent”

??點(diǎn)擊按鈕

文章來源地址http://www.zghlxwxcb.cn/news/detail-595735.html

到了這里，關(guān)于vue進(jìn)階-消息的訂閱與發(fā)布的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！