你想要知道的Vue元件間資料傳遞的方式

2021-10-08 02:01:11 字數 2684 閱讀 1860

通過 props 傳遞屬性

父級給demo2元件繫結乙個msg資料

複製**

子元件通過定義props來使用msg,$emit觸發外部的函式來改變父級傳入的值

} 複製**

通過 $attrs 來收集屬性

$attrs 會收集元件上繫結的屬性,對應class和style不會處理。如果與props同用,props的優先順序要高於attrs

複製** 子元件中this.$attrs會收集元件上繫結的屬性

} 複製**

通過$listeners 來收集方法

$listeners 會收集元件上繫結的方法。 可以通過傳遞實參的方式改變父元件的值

複製**

子元件中this.lis

tene

rs會收

集繫結在

元件上的

方法。通

過thi

s.

listeners會收集繫結在元件上的方法。通過this.

listen

ers會

收集繫結

在元件上

的方法。

通過th

is.listeners.***()可以直接呼叫,以此可以來修改父元件data中的值

} 複製**

通過provide提供依賴,inject注入依賴實現資料跨多級子元件傳遞

通過給父級的 provide 提供乙個依賴物件,讓其所用子元件都能訪問到這個物件

「provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而,如果你傳入了乙個可監聽的物件,那麼其物件的 property 還是可響應的。

」其實也就是說provide 和 inject 繫結本身不做額外的事情(資料繫結之類),只是將提供的資料暴露給子元件。那麼暴露出來的資料是不是可相應的就取決與資料本身

複製**

後代的子元件可以通過reject注入相應的依賴}

複製**

直接訪問元件例項的方式獲取資料

通過 ref 獲取元件例項

ref 屬性定義在元件上獲取的是元件的vue例項,定義在原生標籤上獲取的是對應的dom

需要等掛載之後才能拿到$refs中的內容

} 複製**

通過$parent/chi

ldre

n獲取組

件例項同

樣的也是

必須在m

ount

ed之後

才能獲取

對應例項

父元件通

過children 獲取元件例項 同樣的也是必須在mounted之後才能獲取對應例項 父元件通過

childr

en獲取

元件例項

同樣的也

是必須在

moun

ted之

後才能獲

取對應實

例父元件

通過children獲取子元件例項

} 複製**

子元件通過$paren獲取父元件例項

} 複製**

定義乙個公共倉庫共享資料

定義 eventbus 共享資料

在vue原型上新增乙個bus

為乙個新

的vue

物件,可

以在全域性

的vue

例項中通

過bus為乙個新的vue物件,可以在全域性的vue例項中通過

bus為乙個

新的vu

e物件,

可以在全

局的vu

e例項中

通過bus獲取到這個vue物件,從而獲取這個物件上的屬性和方法。

在main.js中定義

vue.prototype.bus

=new

vue(

data

:a:1

,b:2

,met

hods

:log

()co

nsol

e.lo

g(th

is.a

))複製

程式碼全域性

vue實

例都能獲

取到定義

在bus = new vue(, methods: } }) 複製** 全域性vue例項都能獲取到定義在

bus=ne

wvue

(dat

a:a:

1,b:

2,me

thod

s:lo

g()c

onso

le.l

og(t

his.

a))復

制**全

局vue

例項都能

獲取到定

義在bus上的屬性和方法

通過 vuex 共享資料

官方給出的跨多元件傳遞資料的解決方案。

store index.js

import vue from 『vue』

import vuex from 『vuex』

vue.use(vuex)

export default new vuex.store(,

mutations: ,

changetest2(state,payload)

},actions: ,payload),2000)}},

modules:

})複製**

在元件中使用

} } } }

你想要知道的Git使用小技巧

git學習篇 5 本篇部落格會持續更新git的一些小技巧,幫助你提公升工作效率。linux系統有上個千命令,但常用的命令也就幾十個,除非你是運維工程師,不然掌握那些常用命令,就足夠應付工作了,其他的可以查閱文件。git的命令也同樣多如牛毛,但常用的卻不多。我們知道,linux系統可以通過alias給...

vue元件之間資料傳遞和通訊方式總結

vue元件之間資料傳遞和通訊方式總結 方式主要包括 父元件 子元件 單向資料流,props 子元件 父元件 觀察者模式,即vue的自定義事件 emit 和 on 非父子元件通訊 中介者模式,即 事件匯流排 bus 父子元件通訊 父鏈和子鏈 vuex 等狀態管理庫 略 1 父元件 子元件,props的...

Vue同級(兄弟)元件間資料的傳遞

同級 兄弟 元件間不能直接傳遞資料,需要建立乙個類似橋梁的載體去實現。1 定義乙個公共檔案public.js,建立位置工程src目錄下與main.js同級 內容是建立乙個空的vue例項 import vue from vue export default new vue 2 建立好以後,同級 兄弟 ...