[js高手之路]Vue2.0基於vue-cli+webpack同級元件之間的通訊教程
我們接著上文繼續,本文我們講解兄弟元件的通訊,專案結構還是跟上文一樣.
在src/assets目錄下建立檔案EventHandler.js,該檔案的作用在於給同級元件之間傳遞事件
EventHandler.js程式碼:
1 import Vue from 'Vue'; 2 export default new Vue();
2,在Components目錄下新建一個元件Brother1.vue
1 <template> 2 <div> 3 <h3>Z國: ghostwu</h3> 4 <input v-on:click="send" type="button" value="傳送"> 5<p>{{msg}}</p> 6 </div> 7 </template> 8 <script> 9 import EventHandler from '../assets/EventHandler.js'; 10 export default { 11 data(){ 12 return { 13 msg : '' 14 } 15 }, 16 methods : {17 send(){ 18 EventHandler.$emit( 'myDefineEv', "ghostwu向島國發射了一顆原子彈" ); 19 } 20 }, 21 mounted (){ 22 let _this = this; 23 EventHandler.$on( "RDefineEv", function( data ){ 24 _this.msg = data; 25 } );26 } 27 } 28 </script>
。通過EventHandler.$emit傳送一個自定義事件myDefineEv
。通過mouted【相當於jquery的ready, 原生js的onload】,這個是vue生命週期的鉤子函式, 用於在頁面載入完成之後執行程式碼,在這裡就是接收RDefineEv事件( Brother2.vue定義的 )
2,在Components目錄下新建一個元件Brother2.vue
1 <template> 2 <div> 3 <h3>R國:八嘎</h3> 4 {{msg}} 5 <input v-on:click="defend" type="button" value="防禦"> 6 </div> 7 </template> 8 <script> 9 import EventHandler from '../assets/EventHandler.js'; 10 export default { 11 data(){ 12 return { 13 msg : '' 14 } 15 }, 16 methods : { 17 defend(){ 18 EventHandler.$emit( 'RDefineEv', "島國採用了高科技反原子彈系統" ); 19 } 20 }, 21 mounted(){ 22 let _this = this; 23 EventHandler.$on( "myDefineEv", function( data ){ 24 _this.msg = data; 25 } ); 26 } 27 } 28 </script>
。點選按鈕傳送RDefineEv事件
。文件ready的時候,接收myDefineEv(Brother1.vue)出發的自定義事件
三、在App.vue中呼叫兩個同級元件
1 <template> 2 <div id="app"> 3 <Brother1></Brother1> 4 <Brother2></Brother2> 5 </div> 6 </template> 7 8 <script> 9 import Brother1 from './components/Brother1.vue'; 10 import Brother2 from './components/Brother2.vue'; 11 12 export default { 13 components : { 14 Brother1, 15 Brother2 16 } 17 } 18 </script>
小結:
- 建立一個事件傳遞中心,例如EventHandler.js,用它作為傳遞訊息的中介
- 在需要傳值的元件中用EventHandler.$emit觸發一個自定義事件,並傳遞引數
- 在需要接收資料的元件中用EventHandler.$on監聽自定義事件,並在回撥函式中處理傳遞過來的引數
相關推薦
[js高手之路]Vue2.0基於vue-cli+webpack同級元件之間的通訊教程
我們接著上文繼續,本文我們講解兄弟元件的通訊,專案結構還是跟上文一樣. 在src/assets目錄下建立檔案EventHandler.js,該檔案的作用在於給同級元件之間傳遞事件 EventHandler.js程式碼: 1 import Vue from 'Vue'; 2 export defau
[js高手之路]Vue2.0基於vue-cli+webpack父子元件通訊教程
在git命令列下,執行以下命令完成環境的搭建: 1,npm install --global vue-cli 安裝vue命令列工具 2,vue init webpack vue-demo 使用vue命令生成一個webpack專案,專案名稱為vue-demo 3,c
[js高手之路]Vue2.0基於vue-cli+webpack Vuex用法詳解
元件通訊的本質其實就是在元件之間傳遞資料或元件的狀態(這裡將資料和狀態統稱為狀態),但可以看到如果我們通過最基本的方式來進行通訊,一旦需要管理的狀態多了,程式碼就會變得十分臃腫和龐大。對所有狀態的管理便會顯得力不從心,因此,vuex出現了,他就是幫助我們把公用的狀態全抽出來放在vuex的容器中,然後根據一
vue2.0基於vue-cli,element-ui餓了麼vue前端開源專案製作vue的樹形table,treeTable
<template> <el-table :data="data" border style="width: 100%" :row-style="showTr"> <el-table-column v-for="(column, ind
Vue-cli中非父子元件之間通訊
首先在main.js建立一箇中轉站,並且暴露出來。 //非父子元件通訊中心 const vueEvent=new Vue(); export default vueEvent; 然後在自己的頁面Page.vue中引入進來(路徑自行更改) import vueEvent
[js高手之路]var, let, const詳解
兩種 控制 ghost 花括號 pre 內部 span lec 同名 1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4
[js高手之路] dom常用節點屬性兼容性詳解與應用
asc 子元素 種類型 process 變色 tex 如果 結構 節點和 一、每個DOM節點都有一個nodeType屬性,表示節點類型, NodeType一共有12種類型,我們可以通過遍歷內置的Node構造函數獲取 1 window.onload =
[js高手之路]一步步圖解javascript的原型(prototype)對象,原型鏈
create 原型對象 str 對象賦值 div blank type屬性 查找 __proto__ 我們接著上文繼續,我們通過原型方式,解決了多個實例的方法共享問題,接下來,我們就來搞清楚原型(prototype),原型鏈的來龍去脈. 1 functio
[js高手之路]原型對象(prototype)與原型鏈相關屬性與方法詳解
隱式 之前 username tar uname create pro getproto .get 一,instanceof: instanceof檢測左側的__proto__原型鏈上,是否存在右側的prototype原型. 我在之前的兩篇文章 [js高手之路]構造函數的基
[js高手之路]使用原型對象(prototype)需要註意的地方
spa ray show 特性 之路 對象 重復 new i++ 我們先來一個簡單的構造函數+原型對象的小程序 1 function CreateObj( uName, uAge ) { 2 this.userName = uN
[js高手之路]設計模式系列課程-單例模式實現模態框
ges 點擊 eat abs select nbsp str osi 控制 什麽是單例呢? 單,就是一個的意思。例:就是實例化出來的對象,那合在一起就是保證一個構造函數只能new出一個實例,為什麽要學習單例模式呢?或者說單例模式有哪些常見的應用場景.它的使用還是很廣泛,比如
[js高手之路] 我的開源javascript框架gdom - 選擇器用法
htm query bsp https title 是我 pad logs ext gdom框架是我開發的一款dom和字符串處理框架,目前版本是1.0.0. 使用方法跟jquery是差不多的, 會用jquery就會用gdom,目前 1.0.0版本的選擇器完全支持CSS3選擇
[js高手之路]設計模式系列課程-委托模式實戰微博發布功能
i++ 發布 動態 use shee 內容 標題 cnblogs 文件 在實際開發中,經常需要為Dom元素綁定事件,如果頁面上有4個li元素,點擊對應的li,彈出對應的li內容,怎麽做呢?是不是很簡單? 大多數人的做法都是:獲取元素,綁定事件 1 <ul&
[js高手之路]設計模式系列課程-發布者,訂閱者重構購物車
購物車 代碼重構 發布者訂閱者模式,是一種很常見的模式,比如:一、買賣房子生活中的買房,賣房,中介就構成了一個發布訂閱者模式,買房的人,一般需要的是房源,價格,使用面積等信息,他充當了訂閱者的角色中介拿到賣主的房源信息,根據手頭上掌握的客戶聯系信息(買房的人的手機號),通知買房的人,他充當了發布者的角
[js高手之路]面向對象+設計模式+繼承一步步改造簡單的四則運算
繼承 設計模式 到目前為止,我已經寫完了面向對象完整的一個系列知識,前面基本屬於理論,原理的理解,接下來,我們就用學到的知識來實戰下吧.看看理解原理和理論是否重要?例子從簡單到復雜一、單體(字面量)封裝加減乘除var Oper = { add : function( n1, n
[js高手之路]原型式繼承與寄生式繼承
原型式繼承 寄生式繼承 一、原型式繼承本質其實就是個淺拷貝,以一個對象為模板復制出新的對象function object( o ){ var G = function(){}; G.prototype = o; return ne
[js高手之路]node js系列課程-創建簡易web服務器與文件讀寫
server 分享 回調 能夠 logs 瀏覽器中 文件 讀取 對象 web服務器至少有以下幾個特點: 1、24小時不停止的工作,也就是說這個進程要常駐在內存中 2、24小時在某一端口監聽,如: http://localhost:8080, www服務器默認端口80 3、要
[js高手之路]javascript騰訊面試題學習封裝一個簡易的異步隊列
騰訊 selector host .proto 算法 obj 代碼 ner 試題 這道js的面試題,是這樣的,頁面上有一個按鈕,一個ul,點擊按鈕的時候,每隔1秒鐘向ul的後面追加一個li, 一共追加10個,li的內容從0開始技術( 0, 1, 2, ....9 ),首先我
[js高手之路]深入淺出webpack系列1-安裝與基本打包用法和命令參數
查看 2-2 gre colors 令行 一起 切換 json round webpack,我想大家應該都知道或者聽過,Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建,比如vue官方就推薦使用webp
[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解
基本用法 tle webpack 函數 ges 配置 ref 高手之路 pack 接著上文,重新在webpack文件夾下面新建一個項目文件夾demo2,然後用npm init --yes初始化項目的package.json配置文件,然後安裝webpack( npm inst