谈Vue组件的is特性
时间:2022-07-25
本文章向大家介绍谈Vue组件的is特性,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
大家好,我是你们的小编,今天我们的话题是谈Vue组件的is特性,组件是Vue的中强大的功能之一,组件可以扩展HTMl,进行封装提高复用性,增加了开发效率,因此,Vue为此添加了特殊的功能is,那么is的特性在哪里呢有什么用途呢?
限制元素
其实简单的说,vue模板也是dom模板,在浏览器解析的过程中,也是通过原生浏览器解析dom,那么这样由于对dom的限制进而对vue模板也产生了限制,导致vue的组件中有一些标签是不能放置的,比如ul,select,a,table,dl等等这些标签中,所以需要增添is特性来扩展,从而达到可以在这些受限制的html中使用:
<ul>
<li is="my-component"></li>
</ul>
而不能使用下面这样形式的写法,导致Vue将自定义组件视为无效内容,渲染出错:
<ul>
<my-component></my-component>
</ul>
温馨提示
如果使用下面模板的话,这个限制是不存在的
字符串 (例如:template: '...')
单文件组件 (.vue)
<script type="text/x-template">
动态组件
在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中<component>用:is来挂载不同的组件。
<template>
<ul>
<button @click="components = 'myComponent'">my</button>
<button @click="components = 'youComponent'">you</button>
<button @click="components = 'otherComponent'">other</button>
<component :is="components"></component>
</ul>
</template>
<script>
import myComponent from "./components/mycomponent";
import youComponent from "./components/youcomponent";
import otherComponent from "./components/othercomponent";
export default {
data() {
return {
components: "myComponent"
};
},
components: {
myComponent,
youComponent,
otherComponent
}
};
</script>
我们在components中注册了三个模板,当我们点击当前按钮的时候,就会将模板切换模板,可以说是非常方便了。
- linux 如何正确的关闭mongodb
- 运用Aggregator模式实现MapReduce
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- spring boot项目在外部tomcat环境下部署
- 利用Actor实现管道过滤器模式
- SpringBoot整合Quartz定时任务 的简单实例
- 从机器学习学python(一) ——numpy中的shape、tile、argsort
- 剖析响应式编程的本质
- 从机器学习学python(二) ——iteritems、itemgetter、sorted、sort
- 基于MVC理解React+Redux
- JavaScript的IIFE(即时执行方法)
- 从机器学习学python(三) ——数组冒号取值与extend
- 从机器学习学python(四) ——numpy矩阵基础
- 从map函数引发的讨论
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android实现签名涂鸦手写板
- Android 开发使用Activity实现加载等待界面功能示例
- 详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
- Android开发自定义控件之折线图实现方法详解
- Android Studio实现长方体表面积计算器
- android studio实现简单的计算器功能
- Android小程序实现个人信息管理系统
- Flutter 使用Navigator进行局部跳转页面的方法
- Android小程序实现简易QQ界面
- Android小程序实现音乐播放列表
- 详解Android10的分区存储机制(Scoped Storage)适配教程
- Android自定义View实现可拖拽缩放的矩形框
- Android实现掷骰子效果
- Android实现侧滑菜单DrawerLayout
- Android :okhttp+Springmvc文件解析器实现android向服务器上传照片