vue傳值和事件方式

Tychio 發(fā)布于2019-08-26 10:58 / 2412人閱讀

摘要：袓組件我是祖組件要給孫組件準備的兒組件孫組件二的事件方式子向父傳遞兄弟之間組件我是兄長，弟弟收好了組件兄長，弟弟收到了。

一、vue的傳值方式

1、父向子傳遞

屬性Props

//child
porops:{msg:String}
//parent

2、子向你傳遞

引用refs

//child
data(){
    return {
        hw:"我是子類父類可以調用"
    }
}

//parent

this.$refs.hw

3.provide和inject實現袓孫傳值

provide:就相當于加強版父組件prop

inject:就相當于加強版子組件的props

只要在上一層級的聲明的provide，那么下一層級無論多深都能夠通過inject來訪問到provide的數據

提示：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的屬性還是可響應的。

如果需要傳可響應的值，請使用引用類型的數值，比如{}||[]等。

袓組件

兒組件

孫組件

二、vue的事件方式

1、子向父傳遞

//child
this.$emit("add",good)
//parent

2、兄弟之間

A組件

B組件

父組件

3、袓孫之間(隔輩之間)傳遞

1.使用$attrs和$listeners實現袓孫組件之間數據傳遞

本質探索

$attrs:包含了父作用域不作為prop被識別(且獲取)的特性綁定(class和style除外)，就是說，他獲取到的除了prop里的可以收到和元素自有屬性之外的所有自定義屬性$listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創(chuàng)建更高層次的組件時非常有用。

孫組件

兒組件

袓組件

總結：可以用于傳值和事件從后代組件

2.使用dispatch函數實現后代向祖先傳值

//main.js里
Vue.prototye.dispatch = dispatch;
/**
eventName 派發(fā)事件名稱
data 派發(fā)的數據
**/
function dispatch(eventName,data){
    let parent = this.$parent
    while(parent){
        parent.$emit(eventName,data)
        parent =  parent.$parent;
    }
}

后代組件

祖組件

3.使用事件總線

main.js

class Bus{
    constructor(){
        this.callbacks = {}
    }
    $on(name,fn){
        this.callbacks[name] =  this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }
    $emit(name,args){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(cb=>cb(args))
        }
    }
}
Vue.prototype.$bus = new Bus()

A組件

B組件

最后一種使用Vuex，但vuex比較大，后續(xù)會跟上，敬請期待

云服務器 GPU云服務器 js傳值和傳址 asp傳值和得到值 Vue_Vue 是傳值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106907.html

簡單說說vue的父子組件，父子組件傳值和vuex

摘要：我們需要在里改動一下代碼首先就是綁定一個自定義事件再增加然后在中變成就是觸發(fā)父組件中的方法所以，觸發(fā)了父組件的函數，改變了父組件的的值，父組件再通過傳值給子組件。從而實現數據傳遞，父子組件通信。一、vue的父子組件之間是如何傳值的？首先呢，需要說說的是，vue既然有雙向綁定，那為何會有父子組件之間的傳值問題？這個問題也簡單，vue的組件會供其他的vue頁面進行調用，如果數組都是雙...

Tecode 2019-08-22 18:31 評論0 收藏0
關于前端Vue框架的知識點

摘要：最近有時間，整理一下的知識點，很多都是面試常見的的生命周期如果你能理解了這張圖，也就對的生命周期有了一個大致的了解。創(chuàng)建前后在階段，實例的掛載元素還沒有。模式下，前端的必須和實際向后端發(fā)起請求的一致，如。最近有時間，整理一下Vue的知識點，很多都是面試常見的 1、Vue的生命周期如果你能理解了這張圖，也就對Vue的生命周期有了一個大致的了解。 showImg(https://s...

PAMPANG 2019-08-23 18:27 評論0 收藏0
vue -- 非父子組件傳值，事件總線（eventbus）的使用方式

摘要：我的個人博客地址資源地址非父子組件傳值，事件總線的使用方式我的博客地址如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區(qū)留言，或郵件給我，共同學習進步。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言先說一下什么是事件總線，其實就是訂閱發(fā)布者模式；比如有一個bus對象，這個對象上有兩個方法，一個是on（監(jiān)聽，也就是訂閱），一個是emit（觸發(fā)，也就...

zone 2019-08-23 14:37 評論0 收藏0
Vue 組件子傳父理解篇

摘要：子傳父想要子傳父，通過子組件控制父組件方法，進而讓父組件的方法自己改變自己的明確父組件綁定的上內容作用域都屬于父組件的，因此傳值的都是父組件的或者例如下面的案例，首先和中左面都是子組件的接受的變量值，右面都有可能是父組件或者傳值簡單 vue 子傳父 1.想要子傳父，通過子組件控制父組件方法，進而讓父組件的方法自己改變自己的data 2.明確父組件綁定的dom上內容作用域都屬于父組件的，...

wudengzan 2019-08-23 15:07 評論0 收藏0
在vue中使用JSX語法

摘要：發(fā)明了，利用語法來創(chuàng)建虛擬。然而，對持久化實例的缺乏也意味著函數式組件不會出現在的組件樹里。這個很有用，當你在父組件給子組件綁定事件時就需要這個了。之前考慮過用動態(tài)組件來切換，但是放棄了，因為沒有直觀啊。另外推薦大家多用函數式組件提高性能。什么是JSX? JSX就是Javascript和XML結合的一種格式。React發(fā)明了JSX，利用HTML語法來創(chuàng)建虛擬DOM。當遇到{ ...

quietin 2019-08-22 18:04 評論0 收藏0