vue from 组件,

　　本文主要介绍了在vue中使用inheritAttrs实现组件的可扩展性，具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。

　　1.首先，我们创建一个输入组件。

　　模板

　　div class=inputCom-wrap

　　输入v-bind=$attrs /

　　/div

　　/模板

　　脚本语言

　　从“vue”导入{ defineComponent }

　　导出默认定义组件({

　　InheritAttrs:false，//我们不是直接从根继承属性，而是使用$attrs自定义继承，当前组件的根是inputCom-wrap。

　　setup () {

　　返回{}

　　}

　　})

　　/脚本

　　样式范围

　　/风格

　　2.使用组件时，只需添加一些属性，如

　　type= text class= input-a /inputCom

　　类型=密码类=输入-b /输入

　　3.检查最终渲染结果如下(不会和道具冲突)

　　补充知识：vue组件深层传值inheritAttrs、$attrs、$listeners

　　1、$attrs

　　深度组件值可以通过父组件绑定v-bind=$attrs 传递给子组件

　　通用子组件this。$attrs可以获得父组件的所有传输属性。

　　当注册子组件props来声明一个属性时，这个。$attrs将不包含该属性；

　　同样，由v-bind=$attrs 绑定的孙子组件不会包含子组件props声明的属性。

　　道具：{

　　数据：{

　　类型：数组，

　　默认：()=[]，//数组格式[{label:xx，value:xxx}]

　　},

　　值：{

　　类型：数组，

　　默认值：()=[]，//数组格式[xx，xx，xx]

　　},

　　最大高度：{

　　类型：[字符串，数字]，

　　默认值：350，

　　}

　　},

　　已安装(){

　　Console.log(从多项选择中，这个。$attrs)

　　},

　　2、inheritAttrs

　　默认值为true

　　如果没有声明默认的子组件props，父组件传递的其他属性将被视为props的属性绑定，这些属性将被“回滚”并作为一个通用的HTML属性应用到子组件的根元素(它可能会覆盖子组件的根元素上的一些属性列，如type=text )

　　将子组件的inheritAttrs设置为false可以避免

　　3、$listeners

　　父组件-子组件-孙子组件，现在我要你改变孙子组件中父组件的值，子组件直接绑定。

　　多重选择v-bind= $ attrs v-on= $ listeners class= select /多重选择

　　以上关于在vue中使用inheritAttrs实现组件可扩展性的介绍就是边肖分享的全部内容。希望能给你一个参考，多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。