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单元格多列合并的实现
Nov 26 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue实现简易音乐播放器
Aug 14 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Vue中props的详解
2019/05/16 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Python调用C语言的实现
2019/07/26 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python中upper是做什么用的
2020/07/20 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
美容院考勤制度
2014/01/30 职场文书
婚前协议书
2014/04/15 职场文书
我的长生果教学反思
2014/04/28 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
总结Python连接CS2000的详细步骤
2021/06/23 Python
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技