vue2.0父子元件以及非父子元件通訊傳參詳解
1.父元件傳遞資料給子元件
父元件資料如何傳遞給子元件呢?可以通過props屬性來實現
父元件:
<parent>
<child :child-msg="msg"></child>//這裡必須要用 - 代替駝峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
子元件通過props來接收資料:
方式1:
props: ['childMsg']
- 1
- 1
方式2 :
props: {
childMsg: Array //這樣可以指定傳入的型別,如果型別不對,會警告
}
- 1
- 2
- 3
- 1
- 2
- 3
方式3:
props: {
childMsg: {
type: Array,
default: [0,0,0] //這樣可以指定預設的值
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
這樣呢,就實現了父元件向子元件傳遞資料.
2.子元件與父元件通訊
那麼,如果子元件想要改變資料呢?這在vue中是不允許的,因為vue只允許單向資料傳遞,這時候我們可以通過觸發事件來通知父元件改變資料,從而達到改變子元件資料的目的.
子元件:
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this .$emit('upup','hehe'); //主動觸發upup方法,'hehe'為向父元件傳遞的資料
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
父元件:
<div>
<child @upup="change" :msg="msg"></child> //監聽子元件觸發的upup事件,然後呼叫change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3.非父子元件通訊
如果2個元件不是父子元件那麼如何通訊呢?這時可以通過eventHub來實現通訊.
所謂eventHub就是建立一個事件中心,相當於中轉站,可以用它來傳遞事件和接收事件.
let Hub = new Vue(); //建立事件中心
- 1
- 1
元件1觸發:
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub觸發事件
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
元件2接收:
<div></div>
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
這樣就實現了非父子元件之間的通訊了.原理就是把Hub當作一箇中轉站!
由於vue2.0 移除了1.0中的$dispatch 和$broadcast 這兩個元件之間通訊傳遞資料的方法 ,官方的給出的最簡單的升級建議是使用集中的事件處理器,而且也明確說明了 一個空的vue例項就可以做到,因為Vue 例項實現了一個事件分發介面.
請直接看程式碼,在初始化web app的時候,給data新增一個 名字為eventhub 的空vue物件
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
好的 這個時候 你就可以一勞永逸了,在任何元件都可以呼叫事件發射 接受的方法了.
如何獲取到這個空的vue物件 eventhub呢.在元件裡面直接呼叫這個
某一個元件內呼叫事件觸發
//通過this.$root.eventHub獲取此物件
//呼叫$emit 方法
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)
- 1
- 2
- 3
- 1
- 2
- 3
另一個元件內呼叫事件接受,當然在元件銷燬時接觸繫結,使用$off方法
this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
handle(yourData)
} )
轉載:http://blog.csdn.net/mr_fzz/article/details/54636833
相關推薦
vue2.0父子元件以及非父子元件通訊傳參詳解
1.父元件傳遞資料給子元件 父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件: <parent> <child :child-msg="msg"></child>//這裡必須要用 - 代替駝峰 </p
SpringMVC中使用forward和redirect進行轉發和重定向以及重定向時如何傳參詳解
轉自:http://blog.51cto.com/983836259/1877188 2016-11-28 09:45:59 如題所示,在SpringMVC中可以使用forward和redirect關鍵字在Controller中對原請求進行轉發或重定向到其
vue2.0父子元件以及非父子元件如何通訊
1.父元件傳遞資料給子元件 父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件: <parent> <child :child-msg="msg"></child>//這裡必須要用 - 代替駝峰 </pa
最詳細的vue的父子元件以及非父子元件之間的通訊方式
1.父元件傳遞資料給子元件父元件資料如何傳遞給子元件呢?可以通過props屬性來實現父元件://這裡必須要用 - 代替駝峰data(){ return { msg: [1,2,3] }; }子元件通過props來接收資料: 方式1:props: ['childMsg']方式2 :props: { childM
vue2.0父子組件以及非父子組件如何通信
tty rep create pla eve 16px markup div ont 1.父組件 >>> 子組件 父組件數據如何傳遞給子組件呢?可以通過props屬性來實現 父組件: <parent> <child :child-
[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
vue2.0在頁面中自定義元件模組,以及頁面與元件之間的資料傳遞
1.在頁面上引入寫好的元件import UpdataPassword from './updataPassWord' //updataPassWord為元件的name2.註冊元件components:{ //註冊元件 UpdataPa
[js高手之路]Vue2.0基於vue-cli+webpack同級元件之間的通訊教程
我們接著上文繼續,本文我們講解兄弟元件的通訊,專案結構還是跟上文一樣. 在src/assets目錄下建立檔案EventHandler.js,該檔案的作用在於給同級元件之間傳遞事件 EventHandler.js程式碼: 1 import Vue from 'Vue'; 2 export defau
vue2.0快取資料頁面與部分元件不快取資料頁面
轉自 https://blog.csdn.net/settingsun66/article/details/74909553keep-alive 快取所有元件。但是有些元件在我們的程式中是不想被快取下來的,就拿我現在的這個專案做比方吧。這個我是需要快取的,因為我要去選擇省份所
vue2.0中this.$refs獲取子元件屬性報undefined錯誤
首先,要強調一點,我的re被用來給子元件註冊引用資訊,引用資訊註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子元件上,引用就指向元件例項: 當我呼叫下面這個語句想要改變子元件的data中的uid屬性時候 thi
VUE2.0 stylus封裝loading載入過渡元件
本文主要介紹如何封裝loading載入過渡元件,本文的樣式使用的stylus的寫法 1.在對應的公共元件目錄下,建立loading.vue(如果沒有安裝stylus,請現在package.j
使用editor_md支援markdown元件以及其中的圖片上傳功能
一、editor.md的下載與安裝 下載地址 安裝使用 裡面有多個資料夾,在引入的時候,我們不需要examples示例、docs、tests等資料夾。 引用完畢後目錄: 我也試過指引用css和js檔案,頁面只會顯示大概的內容,但是功能不能使用,如字型圖示
深入解析React受控元件與非受控元件
本篇文章主要介紹了深入解析React受控元件與非受控元件,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。 我們都知道,有許多的web元件可以被使用者的交互發生改變,比如:,,或者是我現在正在使用的富文字編輯器。這些元件在日常
淺析React中的受控元件和非受控元件
React中的受控和非受控表單並不複雜 你可能看到過很多文章,說不應該使用setState,refs不好……這是自相矛盾的。很難理解怎樣是對的,甚至連選擇的規則都不清楚。 那我們應該怎麼解決表單這個棘手的問題呢? 畢竟表單還是某些web應用的核
react中的受控元件,非受控元件;
剛開始react的時候就接觸到受控元件和非受控元件這個概念,然後那個時候長用的元件,比如input,select都是屬於受控元件。受控元件:<input type="text" value={this.state.value} onChange=
Android四大元件之一 廣播接受者入門(附程式碼詳解)
BroadCastReceiver 廣播機制 BroadcastRecevier是Android的四大元件之一。一、廣播的分類: 1.普通廣播 當手機應用程式中一旦觸發了某件事情,那麼就會發送一段廣播,這段廣播時非同步的,能夠被所有的廣播監聽者接收,進行處理。
Python selenium---父子,兄弟 ,相領節點定位方式詳解
今天跟大家分享下selenium中根據父子、兄弟、相鄰節點定位的方法,很多人在實際應用中會遇到想定位的節點無法直接定位,需要通過附近節點來相對定位的問題,但從父節點定位子節點容易,從子節點定位父節點、定位一個節點的哥哥節點就一籌莫展了,別急,且看博主一步步講解。1. 由父節點
Android控制元件之SlidingDrawer(滑動式抽屜)詳解與例項
SlidingDrawer效果想必大家也見到過,它就是1.5模擬器上進入應用程式列表的效果。下面是截圖 一、簡介 SlidingDrawer隱藏屏外的內容,並允許使用者通過handle以顯示隱藏內容。它可以垂直或水平滑動,它有倆個View組成,其
【REACT NATIVE 系列教程之四】重新整理元件RENDER(重新渲染)的三種方式詳解
開發過遊戲的都應該很清楚,“刷屏”是多麼的重要。其實開發應用也如此,當元件的資料被修改後,如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式:this.setState() 【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt
android自定義控制元件(三) 增加內容 自定義屬性 format詳解
1. reference:參考某一資源ID。 (1)屬性定義: <declare-styleable name = "名稱"> <attr name = "backgroun