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+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
PHP 常见郁闷问题答解
2006/11/25 PHP
关于时间计算的结总
2006/12/06 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
初识Node.js
2015/03/20 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
js返回顶部实例分享
2016/12/21 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
详解jquery和vue对比
2019/04/16 jQuery
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
优秀教师主要事迹
2014/02/01 职场文书
银行开业庆典方案
2014/02/06 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
医师定期考核实施方案
2014/05/07 职场文书
前台接待岗位职责
2015/02/03 职场文书
义诊活动通知
2015/04/24 职场文书
团结主题班会
2015/08/13 职场文书
Go语言grpc和protobuf
2022/04/13 Golang
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers