在vue項目開發(fā)中籽暇,組件之間進行數(shù)據(jù)傳遞,是必不可少的芯杀,那么今天就來總結一下vue中組件通信的集中方式端考。
一雅潭、父子組件之間傳遞數(shù)據(jù)
父子組件之間的數(shù)據(jù)傳遞分為父傳子和子傳父。
父傳子:
1.props傳遞
在父組件調(diào)用子組件時傳遞一個prop
<child :title="title"></child>
對應的在子組件去接收這個prop
export default {
props: ['title']
}
一般來說却特,不推薦在子組件中修改prop的值扶供,會導致數(shù)據(jù)流向混亂,如果要修改裂明,請將這個值保存到data中
有些情況下椿浓,需要雙向綁定prop,請使用this.$emit('update:title', newTitle)
觸發(fā)prop的更新闽晦,然后在父組件中去監(jiān)聽這個emit
<child :title="title" @update:title="title=$event"></child>
// 可以簡寫為
<child :title.sync="title"></child>
2.props傳遞數(shù)據(jù)十分方便扳碍,缺點在于有多層組件嵌套時,需要每一級都使用prop傳遞和接收仙蛉,很是麻煩笋敞。vue2.4提供attrs和listeners解決這個問題。
attrs接收父級作用域所有非prop和非class,style傳遞的屬性,在內(nèi)部組件中通過v-bind="$attrs"
listeners屬性中包含了父作用域中b不含.native修飾符的所有v-on監(jiān)聽器荠瘪,使用v-bind="$listeners"
傳遞給內(nèi)部組件夯巷,這兩個屬性在創(chuàng)建高級組件時十分有用
3.provide和inect
父組件通過provide來提供變量,子組件通過inject注入變量
4.父組件通過v-model默認傳遞一個value的prop哀墓,在子組件中觸發(fā)一個emit('input', value)改變父組件的值
5.parent和$children