這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助
先來看一個業(yè)務(wù)需求：
項目經(jīng)常會遇到產(chǎn)品經(jīng)理要求你做某組件一樣的功能，還要在它的基礎(chǔ)上增加?xùn)|西。如何只用少量代碼高效的二次封裝組件呢？
例如我要做一個element-ui的input組件進行封裝，以下是封裝要求：
- 對el-input組件增加某些定制功能
- 調(diào)整el-input的原有css樣式
- 封裝后不得更改原有el-input的所有功能
文章最后會給出element-ui的input組件二次封裝的示例。
先來介紹一下attrs吧
在 Vue2 中，attr 是指組件接收的 HTML 特性(attribute)，通過 props 的方式傳遞給子組件。而在 Vue3 中，attr 的概念被引入了 Composition API 中，并且被用于管理各種配置項。
下面介紹一些 attr 的使用技巧：
Vue2 中使用 attr
- 使用 v-bind指令綁定 HTML 屬性
在 Vue2 中，如果想將父組件傳遞的 HTML 屬性傳遞給子組件進行使用，可以在子組件中通過 props 接收參數(shù)，并使用 v-bind 指令將其綁定到子組件的 HTML 元素上。例如：
<template>
<div class="demo-component" :style="styleObject">{{ message }}</div>
</template>
<script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
};
</script>
在父組件中使用該組件時，可以通過 v-bind 指令將 HTML 特性傳遞給子組件：
<template>
<demo-component message="Hello, world!" :style-object="{ color: 'red' }"></demo-component>
</template>
- 使用 $attrs 對象傳遞所有未被 props 所接收的特性
在 Vue2 中，可以通過 $attrs 對象獲取父組件傳遞給子組件但未被 props 所接收的特性，從而實現(xiàn)組件復(fù)用和擴展的目的。例如：
<template>
<div class="demo-component" :style="styleObject" v-bind="$attrs">{{ message }}</div>
</template>
<script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
};
</script>
在父組件使用該組件時，可以像平常傳遞普通的 HTML 特性一樣，同時還可以傳遞一些自定義的特性：
<template>
<demo-component
message="Hello, world!"
:style-object="{ color: 'red' }"
custom-attribute="something"
></demo-component>
</template>
在子組件中，可以通過 this.$attrs 屬性獲取父組件傳遞給子組件但未被 props 所接收的特性：
console.log(this.$attrs.customAttribute); // 輸出：something
Vue3 中使用 attr
在 Vue3 中，可以通過 setup 函數(shù)中的第二個參數(shù) context 來訪問該組件的配置選項，其中包括了所有未被 props 所接收的特性：
<template>
<div class="demo-component" :style="styleObject" v-bind="$attrs">{{ message }}</div>
</template>
<script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
setup(props, context) {
console.log(context.attrs.customAttribute); // 輸出：something
},
};
</script>
在 setup 函數(shù)中，通過 context.attrs 獲取父組件傳遞給子組件但未被 props 所接收的特性。
除了 $attrs，Vue3 中還引入了 $props 對象，它是一個由 props 組成的響應(yīng)式對象，在組件內(nèi)部通過解構(gòu)賦值可以快速地訪問 props 的屬性值：
<template>
<div class="demo-component" :style="styleObject">{{ message }}</div>
</template>
<script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
setup(props) {
const { message, styleObject } = props;
console.log(message, styleObject); // 輸出：Hello, world! { color: 'red' }
},
};
</script>
在 setup 函數(shù)中，通過解構(gòu)賦值可以快速地訪問 props 的屬性值。
利用 $attrs 和 $listeners 可以在二次封裝 element-ui 組件時非常方便地傳遞組件屬性和事件。
示例代碼
下面以 el-input 組件為例，演示一下vue2中如何高效地二次封裝 element-ui 組件，從而達到只用少量代碼在原有組件上升級的效果：
<template>
<el-input v-bind="$attrs" v-on="$listeners" :class="{ 'is-invalid': isError }">
<template v-if="isError" #append>
<i class="el-input__icon el-icon-circle-close"></i>
</template>
</el-input>
</template>
<script>
export default {
name: "MyInput",
inheritAttrs: false,
props: {
isError: Boolean, // 是否顯示錯誤提示
},
};
</script>
<style scoped lang="scss">
//這是寫自己的樣式內(nèi)容
</style>
解釋一下上面代碼的內(nèi)容吧：
-
使用
v-bind="$attrs"將父級組件所有的未被 props 所接收的特性綁定到 el-input 組件上。 -
使用
v-on="$listeners"將父級組件傳遞給當(dāng)前組件的所有事件監(jiān)聽器綁定到 el-input 組件上。 -
在模板中可以很方便地使用 isError 屬性來擴展組件，并且不需要在父組件中再次定義。
需要注意的是，由于 element-ui 組件本身也包含了一些默認(rèn)的屬性和事件，因此需要在組件中設(shè)置 inheritAttrs: false，以避免傳遞 element-ui 組件自帶的屬性和事件。文章來源：http://www.zghlxwxcb.cn/news/detail-819290.html
本文轉(zhuǎn)載于:
https://juejin.cn/post/7221357811288260664
如果對您有所幫助，歡迎您點個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-819290.html
到了這里，關(guān)于記錄--Vue中的$attrs你真的會用嗎？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
