組件間傳值
- props愚铡、$emit
- $attrs突勇、$listeners
- provide健芭、inject
- vuex（暫不展開）
一奸汇、父子組件間傳值
（1）父組件向子組件傳值（通過 props 屬性）
- 父組件直接在子組件標(biāo)簽上傳值
<div>
<child :value='message'><child>
</div>
import Child from './Child.vue'
components: {
Child
},
- 子組件通過 this.value 來獲取值
// 定義屬性
props: [ 'value' ],
created() {
let msg = this.value
console.log(msg)
}
（2）子組件向父組件傳值（通過 emit 事件）
- 子組件
<div @click="confirm">確定</div>
confirm() {
this.$emit('confirm', this.value);
},
- 父組件
通過 @confirm="onConfirm" 把子組件的事件傳遞給父組件的自定義事件
<div>
<child
:value="message"
@confirm="onConfirm">
</child>
</div>
onConfirm (value) {
let msg = value;
console.log(msg);
},
二施符、祖先后代組件間傳值
使用【$attrs往声、$listeners】或【provide、inject】
如果我們有：A組件(父) -> B組件(子) -> C組件(孫)戳吝，而我們只是想把A組件的信息傳遞給C組件浩销，如果使用props來傳遞信息，雖然能夠?qū)崿F(xiàn)听哭，但是代碼不夠美觀慢洋。在vue2.4中，為了解決該需求陆盘，引入了$attrs 和 $listeners和inheritAttrs（默認(rèn)true普筹，標(biāo)簽元素中是否繼承父組件傳遞過來的屬性）。
（1）$attrs隘马、$listeners
$attrs包含了父作用域中非 props 特性綁定的屬性 (class 和 style 除外)太防。它可以通過 v-bind="$attrs" 將屬性傳入內(nèi)部組件。
$props包含了父作用域中 props 特性綁定的屬性 (class 和 style 除外)酸员。
$listeners包含了父作用域中 (不含 .native 修飾器的) v-on 事件監(jiān)聽器杏头。它可以通過 v-on="$listeners" 將事件監(jiān)聽指向這個(gè)組件內(nèi)的子組件。
- 父組件
<div id="app">
<!-- 父組件調(diào)用子組件 -->
<child :name="111" :age="18" :city="'北京'" @ffunc="fatherFunction"></child>
</div>
function fatherFunction() {
console.log('父組件 function!!!')
}
- 子組件
<div>
<!-- 子組件通過$attrs獲取屬性值 -->
姓名：{{ $props.name }} - 年齡：{{ $attrs.age }} - 城市：{{ $attrs.city }}
<!-- 子組件通過 v-bind="$attrs" 將屬性傳入內(nèi)部組件沸呐，通過 v-on="$listeners" 將事件監(jiān)聽指向這個(gè)組件內(nèi)的子組件 -->
<son :msg="333" v-bind="$attrs" v-on="$listeners"></son>
</div>
inheritAttrs: true, // 標(biāo)簽元素中是否繼承父組件傳遞過來的屬性
props: [ 'name' ],
created() {
console.log(this.$attrs, this.$props);
this.$emit('ffunc')
}
- 孫組件
<div>
<!-- 孫子組件通過$attrs獲取屬性值 -->
消息：{{ $props.msg }} - 年齡：{{ $attrs.age }}
</div>
inheritAttrs: false, // 標(biāo)簽元素中是否繼承父組件傳遞過來的屬性
props: [ 'msg' ],
created() {
console.log(this.$attrs, this.$props);
this.$emit('ffunc')
}
inheritAttrs（默認(rèn)true醇王，標(biāo)簽元素中是否繼承父組件傳遞過來的屬性）
（2）provide、inject
假如有一些深度嵌套的組件崭添，而深層的子組件只需要父組件的部分內(nèi)容寓娩。在這種情況下，如果仍然將 prop 沿著組件鏈逐級(jí)傳遞下去呼渣，可能會(huì)很麻煩棘伴。
對(duì)于這種情況，我們可以使用一對(duì) provide 和 inject屁置。無論組件層次結(jié)構(gòu)有多深焊夸，父組件都可以作為其所有子組件的依賴提供者。這個(gè)特性有兩個(gè)部分：父組件有一個(gè) provide 選項(xiàng)來提供數(shù)據(jù)蓝角，子組件有一個(gè) inject 選項(xiàng)來開始使用這些數(shù)據(jù)阱穗。
- 父組件
<div id="app">
<!-- 父組件 -->
<child></child>
</div>
data () {
return {
name: '我是父組件的數(shù)據(jù)',
age: '',
city: ''
}
},
provide() { // 父組件提供數(shù)據(jù)（只需要name字段數(shù)據(jù)）
return {
user: this.name
}
},
- 子組件
<son></son>
- 孫組件
<div>
獲取父組件的數(shù)據(jù)：{{ user }}
</div>
inject: ['user'], // 子組件使用數(shù)據(jù)
created() {
console.log(this.user)
}
