關(guān)于vue組件事件屬性穿透詳解
組件事件屬性穿透
屬性
$attrs包含從父組件傳過來的屬性，但不包含子組件中prop中的屬性以及class和style，所以對(duì)于那些html元素原生屬性，可以不用再子組件中聲明，直接從父組件中傳進(jìn)來就好
// 子組件
<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: '測(cè)試'}
console.log('attrs:%o', this.$attrs) // {value: '測(cè)試'}
},
// 父組件
<myInput :value="value" :class="class_" :style='style' :test='test' @input1="input"/>
data () {
return {
style: {
color: 'red'
},
value: '測(cè)試',
class_: 'test',
test: '測(cè)試'
}
}
注意:
由于在這個(gè)組件中input并不是根元素，默認(rèn)情況下父組件的不被認(rèn)作 props 的特性綁定將會(huì)“回退”且作為普通的 HTML 特性應(yīng)用在子組件的根元素上，在該例子中根節(jié)點(diǎn)div會(huì)有value="測(cè)試"的屬性，所以子組件需要設(shè)置 inheritAttrs: false去掉根元素默認(rèn)行為，這樣就可以通過實(shí)例屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的綁定到非根元素上。
在子組件修改props，卻不會(huì)修改父組件，這是因?yàn)閑xtractPropsFromVNodeData中是通過淺復(fù)制將父組件中數(shù)據(jù)傳遞給props的。 淺復(fù)制意味著在子組件中對(duì)對(duì)象和數(shù)組的props進(jìn)行修改還是會(huì)影響父組件，這就違背了單向數(shù)據(jù)流的設(shè)計(jì)。因此需要避免這種情況出現(xiàn)。
事件
$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件
computed: {
listeners () {
return {
...this.$listeners,
// 下面寫需要從子組件事件傳值到從父組件中的
input: e => {
this.$emit('input1', e.target.value)
}
}
}
},
以上這篇關(guān)于vue組件事件屬性穿透詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目在線上服務(wù)器訪問失敗原因分析
這篇文章主要介紹了vue項(xiàng)目在線上服務(wù)器訪問失敗原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue在 Nuxt.js 中重定向 404 頁面的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue中音頻wavesurfer.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
如何解決this.$refs.form.validate()不執(zhí)行的問題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue+element表格導(dǎo)出為Excel文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了關(guān)于vant折疊面板默認(rèn)展開問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue0.1的過濾代碼如何添加到Vue2.0直接使用，這篇文章主要介紹了過濾代碼添加到Vue2.0用的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vxe-table是一個(gè)全功能的Vue表格,滿足絕大部分對(duì)Table的一切需求,與任意組件庫(kù)完美兼容,下面這篇文章主要給大家介紹了關(guān)于Vxe-Table開發(fā)中各種坑以及避坑的相關(guān)資料,需要的朋友可以參考下2022-09-09
關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問題
這篇文章主要介紹了關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10