Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)

來源：懂視網責編：小采時間：2020-11-27 22:30:14

Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)

Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦):我們接著上文繼續，本文我們講解兄弟組件的通信，項目結構還是跟上文一樣. 在src/assets目錄下建立文件EventHandler.js，該文件的作用在于給同級組件之間傳遞事件 EventHandler.js代碼： import Vue from 'Vue'; export default

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦):我們接著上文繼續，本文我們講解兄弟組件的通信，項目結構還是跟上文一樣. 在src/assets目錄下建立文件EventHandler.js，該文件的作用在于給同級組件之間傳遞事件 EventHandler.js代碼： import Vue from 'Vue'; export default

我們接著上文繼續，本文我們講解兄弟組件的通信，項目結構還是跟上文一樣.

在src/assets目錄下建立文件EventHandler.js，該文件的作用在于給同級組件之間傳遞事件

EventHandler.js代碼：

import Vue from 'Vue';
export default new Vue();

1，在Components目錄下新建一個組件Brother1.vue

<template>
 <div>
 <h3>Z國: ghostwu</h3>
 <input v-on:click="send" type="button" value="發送">
 <p>{{msg}}</p>
 </div>
</template>
<script>
 import EventHandler from '../assets/EventHandler.js';
 export default {
 data(){
 return {
 msg : ''
 }
 },
 methods : {
 send(){
 EventHandler.$emit( 'myDefineEv', "ghostwu向島國發射了一顆原子彈" );
 }
 },
 mounted (){
 let _this = this;
 EventHandler.$on( "RDefineEv", function( data ){
 _this.msg = data;
 } );
 }
 }
</script>

。通過EventHandler.$emit發送一個自定義事件myDefineEv

。通過mouted【相當于jquery的ready, 原生js的onload】，這個是vue生命周期的鉤子函數，用于在頁面加載完成之后執行代碼，在這里就是接收RDefineEv事件( Brother2.vue定義的 )

2，在Components目錄下新建一個組件Brother2.vue

<template>
 <div>
 <h3>R國:八嘎</h3>
 {{msg}}
 <input v-on:click="defend" type="button" value="防御">
 </div>
</template>
<script>
 import EventHandler from '../assets/EventHandler.js';
 export default {
 data(){
 return {
 msg : ''
 }
 },
 methods : {
 defend(){
 EventHandler.$emit( 'RDefineEv', "島國采用了高科技反原子彈系統" );
 }
 },
 mounted(){
 let _this = this;
 EventHandler.$on( "myDefineEv", function( data ){
 _this.msg = data;
 } );
 }
 }
</script>

。點擊按鈕發送RDefineEv事件

。文檔ready的時候，接收myDefineEv(Brother1.vue)出發的自定義事件

三、在App.vue中調用兩個同級組件

<template>
 <div id="app">
 <Brother1></Brother1>
 <Brother2></Brother2>
 </div>
</template>

<script>
 import Brother1 from './components/Brother1.vue';
 import Brother2 from './components/Brother2.vue';

 export default {
 components : {
 Brother1,
 Brother2
 }
 }
</script>

小結：

創建一個事件傳遞中心，例如EventHandler.js，用它作為傳遞消息的中介

在需要傳值的組件中用EventHandler.$emit觸發一個自定義事件，并傳遞參數

在需要接收數據的組件中用EventHandler.$on監聽自定義事件，并在回調函數中處理傳遞過來的參數

以上這篇Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com