Vue中inheritAttrs的使用实例详解


Posted in Vue.js onDecember 31, 2020

今天举一个例子解释一下inheritAttrs的使用

先看代码

<body>
		<div id="app" class="vueclass">
			<my-com title="标题" wx-attr1="未定义属性1" wx-attr2="未定义属性2"></my-com>
		</div>
		<script type="text/javascript">
			Vue.component("my-com",{
				props:{
					title:String,
				},
				inheritAttrs:false,
				template:`
					<div wx-attr1="hello" >
						<h1>{{title}}</h1>
					</div>
				`,
			})
			const App = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				}
			})
		</script>
	</body>

当inheritAttrs的值为false时,自定义属性是插入不到我们的组件中的,结果如下

Vue中inheritAttrs的使用实例详解

当inheritAttrs的值为true时,自定义属性可以插入到我们的组件中,并且会覆盖掉在组件中相同未定义属性名称的值,结果如下

Vue中inheritAttrs的使用实例详解

但在组件中定义的class属性和style属性,使用inheritAttrs属性并不能阻碍class属性和style属性传到模板中,如果模板中也存在class属性和style属性,这样属性会叠加到一起

结果如下

Vue中inheritAttrs的使用实例详解

还有一种情况,先看代码

<body>
		<div id="app" class="vueclass">
			<my-com title="标题" wx-attr1="未定义属性1" wx-attr2="未定义属性2" class="wxClass" style="color:red"></my-com>
		</div>
		<script type="text/javascript">
			Vue.component("my-com",{
				props:{
					title:String,
				},
				inheritAttrs:,
				template:`
					<div wx-attr1="hello" class="div1" style="width:500px" v-bind="$attrs">
						<h1>{{title}}</h1>
					</div>
				`,
			})
			const App = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				}
			})
		</script>
	</body>

当模板里绑定v-bind="$attrs"时,inheritAttrs为true时,自定义属性可以插入到我们的组件中,并且会覆盖掉在组件中相同未定义属性名称的值,结果如下

Vue中inheritAttrs的使用实例详解

当模板里绑定v-bind="$attrs"时,inheritAttrs为false时,自定义属性可以插入到我们的组件中,但不会覆盖掉在组件中相同未定义属性名称的值,结果如下

Vue中inheritAttrs的使用实例详解

当模板里绑定v-bind="$attrs"时,并不会影响class属性与style属性,组件里的值依然会叠加到模板里

到此这篇关于Vue中inheritAttrs的使用的文章就介绍到这了,更多相关Vue inheritAttrs使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue 组件注册全解析
Dec 17 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 #Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
Vue实现简易购物车页面
Dec 30 #Vue.js
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
在PHP中执行系统外部命令
2006/10/09 PHP
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python中的变量和作用域详解
2016/07/13 Python
python如何读写json数据
2018/03/21 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python打印异常信息的两种实现方式
2019/12/24 Python
python 异步async库的使用说明
2020/05/04 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
接待员岗位责任制
2014/02/10 职场文书
微观世界观后感
2015/06/10 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python