1. 程式人生 > >vue2.0父子元件以及非父子元件通訊傳參詳解

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