×

vue中使用inheritAttrs实现组件的扩展性

作者:andy0012021.01.22来源:Web前端之家浏览:5516评论:0
关键词:jsvuejs

vue中使用inheritAttrs实现组件的扩展性,看下DEMO。

<template>
  <div>
    <input v-bind="$attrs" />
  </div>
</template>
  
<script>
import { defineComponent } from 'vue'
  
export default defineComponent({
  inheritAttrs:false,//不希望根直接继承特性,而是使用$attrs自定义继承,当前组件的根就是inputCom-wrap
  setup () {
    return {}
  }
})
</script>
  
<style scoped> 
</style>

2、使用组件的时候,随便增加一些属性,如:

<inputCom type="text" class="input-a"></inputCom>
<inputCom type="password" class="input-b"></inputCom>

大家试试看下最后的渲染结果吧。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20210122a2.html

网友评论文明上网理性发言 已有0人参与

发表评论: