Vue組件通信方式(父傳子、子傳父、兄弟通信)

更新時(shí)間：2022年05月27日 14:32:37 作者：star@星空

這篇文章主要介紹了Vue組件通信方式(父傳子、子傳父、兄弟通信)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

父組件傳到子組件

父組件是通過props屬性給子組件通信的

數(shù)據(jù)是單向流動(dòng) 父—>子（子組件中修改props數(shù)據(jù)，是無效的，會有一個(gè)紅色警告）

1. 父組件parent.vue代碼如下：

?<template>
? ?<div class="parent">
? ? ?<h2>{{ msg }}</h2>
? ? ?<son :fa-msg="msg"></son> <!-- 子組件綁定faMsg變量,注意駝峰-->
?</div>
?</template>

?<script>
?import son from './Son' //引入子組件
?export default {
? ?name: 'HelloWorld',
? ?data () {
? ? ?return {
? ? ? ?msg: '父組件',
? ? ?}
? ?},
? ?components:{son},
?}
?</script>

2. 子組件son代碼如下：

?<template>
? ?<div class="son">
? ? ?<p>{{ sonMsg }}</p>
? ? ?<p>子組件接收到內(nèi)容：{{ faMsg }}</p>
? ?</div>
?</template>

?<script>
?export default {
? ?name: "son",
? ?data(){
? ? ?return {
? ? ? ?sonMsg:'子組件',
? ? ?}
? ?},
? ?props:['faMsg'],//接收psMsg值
?}
</script>

子組件通過props來接受數(shù)據(jù)

第一種方法

props: ['childCom']

第二種方法

props: {
? ? childCom: String //這里指定了字符串類型，如果類型不一致會警告的哦
}

第三種方法

props: {
? ? childCom: {
? ? ? ? type: String,
? ? ? ? default: 'sichaoyun'?
? ? }
}

子組件向父組件傳值

通過綁定事件然后及$emit傳值

vue2.0只允許單向數(shù)據(jù)傳遞，我們通過出發(fā)事件來改變組件的數(shù)據(jù)

1.父組件parent代碼如下:

父組件通過綁定自定義事件，接受子組件傳遞過來的參數(shù)

?<template>
? ?<div class="parent">
? ? ?<h2>{{ msg }}</h2>
? ? ?<p>父組件接手到的內(nèi)容：{{ username }}</p>
? ? ?<son psMsg="我是你爸爸" @transfer="getUser"></son>?
? ? ? <!-- 監(jiān)聽子組件觸發(fā)的transfer事件,然后調(diào)用getUser方法 -->
? ?</div>
?</template>

?<script>
?import son from './Son'
?export default {
? ?name: 'HelloWorld',
? ?data () {
? ? ?return {
? ? ? ?msg: '父組件',
? ? ? ?username:'',
? ? ?}
? ?},
? ?components:{son},
? ?methods:{
? ? ?getUser(msg){
? ? ? ?this.username= msg
? ? ?}
? ?}
?}
?</script>

2.子組件son代碼如下：

子組件通過$emit觸發(fā)父組件上的自定義事件，發(fā)送參數(shù)

?<template>
? ?<div class="son">
? ? ?<p>{{ sonMsg }}</p>
? ? ?<p>子組件接收到內(nèi)容：{{ psMsg }}</p>
? ? ?<!--<input type="text" v-model="user" @change="setUser">-->
? ? ?<button @click="setUser">傳值</button>
? ?</div>
?</template>

?<script>
?export default {
? ?name: "son",
? ?data(){
? ? ?return {
? ? ? ?sonMsg:'子組件',
? ? ? ?user:'子傳父的內(nèi)容'
? ? ?}
? ?},
? ?props:['psMsg'],
? ?methods:{
? ? ?setUser:function(){
? ? ? ?this.$emit('transfer',this.user)//觸發(fā)transfer方法，this.user 為向父組件傳遞的數(shù)據(jù)
? ? ?}
? ?}
?}
?</script>

非父子傳參（事件總線）

假設(shè)你有兩個(gè)Vue組件需要通信： A 和 B ，A組件按鈕上面綁定了點(diǎn)擊事件，發(fā)送一則消息，B組件接收。

1. 初始化，全局創(chuàng)建$bus

直接在項(xiàng)目中的 main.js 初始化 $bus :

// main.js
window.$bus=new Vue();

注意，這種方式初始化一個(gè) 全局的事件總線。

2. 發(fā)送事件

$bus.$emit("aMsg", '來自A頁面的消息');

<!-- A.vue -->
<template>
? ?<button @click="sendMsg()">-</button>
</template>

<script>?
//import $bus from "../bus.js";
export default {
?methods: {
? ?sendMsg() {
? ? ?$bus.$emit("aMsg", '來自A頁面的消息');
? ?}
?}
};?
</script>

接下來，我們需要在 B頁面中接收這則消息。

4. 接收事件

$bus.$on("事件名",callback)

<!-- IncrementCount.vue -->
<template>
?<p>{{msg}}</p>
</template>

<script>?
//import $bus ?from "../bus.js";
export default {
?data(){
? ?return {
? ? ?msg: ''
? ?}
?},
?mounted() {
? ?$bus.$on("aMsg", (msg) => {
? ? ?// A發(fā)送來的消息
? ? ?this.msg = msg;
? ?});
?}
};
</script>

<<<<<<<<<<<<<<下方是拓展，面試不必說>>>>>>>>>>>

事件總線推薦下面寫法：

集中式的事件中間件就是 Bus。我習(xí)慣將bus定義到全局：

app.js

var eventBus = {
? ? install(Vue,options) {
? ? ? ? Vue.prototype.$bus = vue
? ? }
};
Vue.use(eventBus);

然后在組件中，可以使用$emit， $on， $off 分別來分發(fā)、監(jiān)聽、取消監(jiān)聽事件：

分發(fā)事件的組件

// ...
methods: {
? todo: function () {
? ? this.$bus.$emit('todoSth', params); ?//params是傳遞的參數(shù)
? ? //...
? }
}

監(jiān)聽的組件

// ...
created() {
? this.$bus.$on('todoSth', (params) => { ?//獲取傳遞的參數(shù)并進(jìn)行操作
? ? ? //todo something
? })
},
// 最好在組件銷毀前
// 清除事件監(jiān)聽
beforeDestroy () {
? this.$bus.$off('todoSth');
}

如果需要監(jiān)聽多個(gè)組件，只需要更改 bus 的 eventName:

// ...
created() {
? this.$bus.$on('firstTodo', this.firstTodo);
? this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件監(jiān)聽
beforeDestroy () {
? this.$bus.$off('firstTodo', this.firstTodo);
? this.$bus.$off('secondTodo', this.secondTodo);
}

vue 跨頁面雙向通信

同源通信

1. localStorage

添加時(shí)間監(jiān)聽

window.addEventListener('storage', function (e) {});

改變 localStorage 值，觸發(fā) storage 事件

window.localStorage.setItem('params', JSON.stringify(object));

2. 通過跳轉(zhuǎn) url 傳參

// 跳轉(zhuǎn)路徑帶參數(shù)

3. 通過 BroadCast channel 廣播實(shí)現(xiàn)通信

// 創(chuàng)建一個(gè)廣播頻道
const bc = new BroadcastChannel('kaixin');

// 其他頁面可以通過onmessage來監(jiān)聽被廣播的消息
bc.onmessage = function (res) {
? ? const data = res.data;
};

// 發(fā)送消息時(shí)直接調(diào)用實(shí)例上的postMessage方法
bc.postMessage(data);

4. shareWorker

非同源通訊

1. iframe 嵌套

1、發(fā)送消息
window.postMessage(message, targetOrigin, [transfer])
// message ?需要傳的數(shù)據(jù)[object]
// 目標(biāo)窗口(URI), *代表沒有限制任何窗口都能接收
// transfer 是一串和message 同時(shí)傳遞的 Transferable 對象. 這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。
2、監(jiān)聽發(fā)來的消息
window.addEventListener("message", receiveMessage, false);
// receiveMessage 處理函數(shù)[$event]
function receiveMessage(event){
????// 參數(shù) event
????// event.data 就是你傳的參數(shù)
????// event.origin 發(fā)送者的目標(biāo)url，做安全驗(yàn)證
????// event.source 發(fā)送者的window對象
????
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: