vue元件之間的資料通訊小例子

2021-08-10 23:21:08 字數 1303 閱讀 5817

html

>

<

html

lang=

"en"

>

<

head

>

<

meta

charset=

"utf-8"

>

<

title

>

元件之間的通訊

title

>

head

>

<

body

>

<

script

src=

"js/vue.js"

>

script

>

<

div

id=>

<

son

:message=

"msg"

>

son>

div>

<

script

>

// 編寫和註冊子元件

vue.

component(

'son',}'

})let vm =

new

vue(

})script

>

<

div

id=>

<

sub1

@connect=

"say"

>

sub1

>

div>

<

script

>

//

子元件如果要實現向父元素傳遞資料則使用

: 自定義事件

// 註冊新元件

vue.

component(

'sub1',},

methods:}})

let vm1 =

new

vue(}})

//

非父子元件之間的通訊方式

: 1、通過乙個空的

vue元件

// 2

、利用狀態管理的

vuex

script

>

body

>

html

>

Vue元件之間的資料通訊

最近在用vue做專案,學習了不少東西,但是有時候光顧著做專案卻忘記要找個時間來整理一下最近的一些學習新得,因為是新手,所以可能會有錯誤的地方,歡迎指出和交流呀 關於父子元件以及非父子元件之間的資料通訊 元件之間資料通訊.png 1 父子元件之間資料通訊 一般父元件向子元件傳遞資料用prop進行傳遞,...

vue 元件資料通訊

父元件傳給子元件props父元件設定props值 text 元件內部資料傳遞 注意 傳遞固定內容say 固定內容 傳遞data裡面的變數 say text 傳boolean值和物件 componen title false duixiang 子元件接收propsprops componentitle...

Vue學習 元件中的資料通訊

目錄元件中的雙向繫結 父元件訪問子元件 children或 refs 子元件訪問父元件 parent 元件的擴充套件 slot 其它訊息內容 data components const cpnc vue.extend const cpnc vue.extend methods decrement f...