溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
組件事件屬性穿透
屬性
$attrs包含從父組件傳過來的屬性，但不包含子組件中prop中的屬性以及class和style，所以對于那些html元素原生屬性，可以不用再子組件中聲明，直接從父組件中傳進來就好
// 子組件
<template>
<div>
<input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/>
</div>
</template>
props: {
test: {
type: String,
default: '123456'
}
},
created () {
console.log(`props:%o`, this.$props) // {test: '測試'}
console.log('attrs:%o', this.$attrs) // {value: '測試'}
},
// 父組件
<myInput :value="value" :class="class_" :style='style' :test='test' @input1="input"/>
data () {
return {
style: {
color: 'red'
},
value: '測試',
class_: 'test',
test: '測試'
}
}
注意:
由于在這個組件中input并不是根元素，默認情況下父組件的不被認作 props 的特性綁定將會“回退”且作為普通的 HTML 特性應用在子組件的根元素上，在該例子中根節點div會有value="測試"的屬性，所以子組件需要設置 inheritAttrs: false去掉根元素默認行為，這樣就可以通過實例屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的綁定到非根元素上。
在子組件修改props，卻不會修改父組件，這是因為extractPropsFromVNodeData中是通過淺復制將父組件中數據傳遞給props的。 淺復制意味著在子組件中對對象和數組的props進行修改還是會影響父組件，這就違背了單向數據流的設計。因此需要避免這種情況出現。
事件
$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件
computed: {
listeners () {
return {
...this.$listeners,
// 下面寫需要從子組件事件傳值到從父組件中的
input: e => {
this.$emit('input1', e.target.value)
}
}
}
},
以上這篇關于vue組件事件屬性穿透詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
