vue元件的幾種通訊

props和￥emit(常用)

vue.

component
('child',}
,    template:
`      
`,    props:
['message'],
//設定props屬性值，得到父元件傳遞過來的資料
methods:}}
)  vue.
component
('parent',}
,    methods:}}
)

1).父元件傳遞了message資料給子元件，並且通過v-on繫結了乙個getchilddata事件來監聽子元件的觸發事件；

2).子元件通過props得到相關的message資料,最後通過this.$emit觸發了getchilddata事件

￥attrs和￥listeners

若父元件a下面有子元件b，元件b下面有元件c,這時如果元件a想傳遞資料給元件c怎麼辦呢？ 如果採用第一種方法，我們必須讓元件a通過prop傳遞訊息給元件b，元件b在通過prop傳遞訊息給元件c；

要是元件a和元件c之間有更多的元件，那採用這種方式就很複雜了。vue 2.4開始提供了att

rs

和attrs和

attrs和

listeners來解決這個問題，能夠讓元件a之間傳遞訊息給元件c。

vue.

component
('c',}
})vue.
component
('b',}
,    template:
`      
`,    props:
['message'],
//得到父元件傳遞過來的資料
methods:}}
)  vue.
component
('a',}
,    methods:
,//執行c子元件觸發的事件
getcdata
(val)}}
)

父元件通過v-model傳遞值給子元件時，會自動傳遞乙個value的prop屬性，在子元件中通過this.$emit(『input』,val)自動修改v-model繫結的值

vue.

component
('child',,
data()
},methods:},
template:
`      
})vue.component('parent',
}<
/p>
"message"
>
<
/child>
<
/div>
`,    data()}})
template:`
<
/parent>
<
/div>
`})

在 vue.js 的 2.2.0+ 版本中新增加了 provide 和 inject 選項。他們成對出現，用於父級元件向下傳遞資料。

父元件中通過provider來提供變數，然後在子元件中通過inject來注入變數。

不論子元件有多深，只要呼叫了inject那麼就可以注入provider中的資料。

而不是侷限於只能從當前父元件的prop屬性來獲取資料，只要在父元件的生命週期內，子元件都可以呼叫。

vue.

component
('child',}
,    template:
`      
})vue.component('parent',
,data()
}})

￥parent和￥children

在元件內部可以直接通過子元件￥parent對父元件進行操作，父元件通過$children對子元件進行操作.

vue.

component
('child',,
data()
},methods:},
template:
`      
})vue.component('parent',
},data()}})
template:`
<
/parent>
<
/div>
`})

vue元件間通訊的幾種方式

方法一 props emit 1 父元件向子元件傳值 父元件中通過v bind繫結需要給子元件傳遞的值，子元件中通過props拿到父元件傳遞的值 username 前者自定義名稱便於子元件呼叫，後者要傳遞資料名 div template import child from components ch...

vue元件間的幾種通訊方式

1.父 往 子元件上傳遞 props 父元件上寫 子元件上使用 props接收 在vue例項中加上 1.props 2.props parent 2.子 往父親上傳遞 emit 父元件 1.2.在 methods 子元件 1.觸發父元件上的那個child事件 可以在created鉤子函式中定義 th...

vue的元件通訊

父元件與子元件傳值 父元件傳給子元件 子元件通過props方法接受資料 父元件 子元件 屬性1 值 屬性2 值 子元件 子元件 屬性 變數 子元件 for item in 屬性1 li export default script 注意 vue是單向資料流，子元件不能修改props中的屬性，但是在父元...