vue 组件属性 name的作用

news/2024/7/9 23:38:54 标签: vue, 组件属性, name
组件是有name属性的,匹配的就是组件的name。和vue-router中配置的name是不同的含义。

1.当项目使用keep-alive时,可搭配组件name进行缓存过滤
	配置<keep-alive>标签的exclude或者include属性做组件筛选
	实例:
		<div id="app"> 
			<keep-alive exclude="Detail">
				<router-view/>
			</keep-alive>
		</div>

2.DOM做递归组件时
	在自身组件调用自身的时候,可以通过定义name的值进行递归调用
	实例:
		<div> 
			<div v-for="(item,index) of list" :key="index"> 
				<div> 
					<span class="item-title-icon"></span>{{item.title}} 
				</div> 
				<div v-if="item.children" > 
					<detail-list :list="item.children"></detail-list> 
				</div> 
			</div> 
		</div>

		<script>
			export default {
				name:'DetailList',//递归组件是指组件自身调用自身
				props:{
					list:Array
				}
			}
		</script>

3.当你用vue-tools时
	vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

 


http://www.niftyadmin.cn/n/1162550.html

相关文章

vue keep-alive

keep-alive本身是vue2.0的功能&#xff0c;可以使被包含的组件保留状态&#xff0c;或避免重新渲染 标签<keep-alive>具有属性&#xff1a;1. include&#xff1a;内容要求字符串或正则表达&#xff0c;只有匹配的组件会被缓存2.exclude&#xff1a;内容要求字符串或正则…

vue项目中app.vue 、main.js和 index.html的关联

1. main.js是入口文件&#xff0c;主要作用是初始化vue实例并使用需要的插件。 2. App.vue是主组件&#xff0c;所有页面都是在App.vue下进行切换的。 3. main.js中的根实例会挂载到index.html中的<div id"app"> 4. index.html文件入口 5. src…

RGBA(0,0,0,0)调色

前三个值&#xff08;红绿蓝&#xff09;的范围为0到255之间的整数或者0%到100%之间的百分数。 第四个值&#xff0c;alpha值&#xff0c;制定了色彩的透明度/不透明度&#xff0c;它的范围为0.0到1.0之间,0.5为半透明。 rgba(255, 255, 255, 0)则表示完全透明的白色 rgba(0, 0…

filter: blur() 高斯模糊效果

比较喜欢的效果实例&#xff1a;<div class"lbg"><img src"../../assets/01.jpg" class"test-img"></div>.lbg{/* 设置相对定位 */position: relative;/* 宽度120%&#xff0c;-10%让元素集中 */left: -10%;/* 为了实现椭圆效…

Animate.css 动画效果框架

1. 从官网下载 https://raw.github.com/daneden/animate.css/master/animate.css 2. 通过npm安装 $ npm install animate.css 3. 使用在线cdn https://unpkg.com/animate.css3.5.2/animate.min.css 想要使用哪种动画&#xff0c;只需要把通用类animat…

vue set的使用

受 ES5 的限制&#xff0c;Vue.js 不能检测到以下响应式界面更新&#xff1a; 1. 数组中某一项的变动 例如&#xff1a; arr: [1,2,3,4] this.arr[0] 5 2. 数组长度的改变 例如&#xff1a; arr: […

Sortable.js 拖放排序插件

Sortable.js是一款轻量级的拖放排序列表的js插件 1. 安装$ npm install sortablejs --save 2. 使用定位到需要排序的对象&#xff0c;创建Sortable对象并添加响应配置设置可以通过方法&#xff1a;var sortable Sortable.create(el,{}) 或者 var sortable new Sortable(el…

react history 历史页面管理

history是为React Router提供核心功能的包。 它能轻松地在客户端为项目添加基于location的导航。 1. 安装npm install --save history 2. 类型import { createBrowserHistory, createHashHistory, createMemoryHistory } from history存在三类history&#xff0c;分别时browse…