vue内置组件component--通过is属性动态渲染组件操作


Posted in Javascript onJuly 28, 2020

我就废话不多说了,大家看代码吧~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<input @click="currentrouter='Home'" type="button" value="首页"/>
			<input @click="currentrouter='Fenlei'" type="button" value="分类"/>
			<input @click="currentrouter='My'" type="button" value="我的"/>
			<!-- 动态组件 component -->
			<component :is="currentrouter"></component>
		</div>
		
		<template id="home">
			<div>
				{{msg}}
			</div>
		</template>
		<template id="fenlei">
			<div>
				{{msg}}
			</div>
		</template>
		<template id="my">
			<div>
				{{msg}}
			</div>
		</template>
		
		<script>
			//局部定义三个组件
			const Home = {
				template:"#home",
				data(){
					return{
						msg:"这里是home组件"
					}
				}
			}
			const Fenlei = {
				template:"#fenlei",
				data(){
					return{
						msg:"这里是fenlei组件"
					}
				}
			}
			const My = {
				template:"#my",
				data(){
					return{
						msg:"这里是my组件"
					}
				},
			}
			//vue 实例
			var vm = new Vue({
				el:"#app",
				components:{
					Home,
					Fenlei,
					My
				},
				data:{
					msg:"hello world",
					currentrouter:"Home"
				},
				methods:{
					
				}
			})
			
		</script>
	</body>
</html>

补充知识:详解vue组件的is特性:限制元素&动态组件

在vue.js组件教程的一开始提及到了is特性

vue内置组件component--通过is属性动态渲染组件操作

意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样:

<ul>
  <li></li>
</ul>
//而不能:
<ul>
  <your-component>
</ul>

这样就不能复用your-component这个组件了,如果要达到我们的目的,我们就要使用is特性像这样:

<ul>
  <li is="your-component"></li>
</ul>

组件功能是vue项目的一大特色。组件可以扩展html元素,可以封装可重用的代码,可以增加开发效率。它是自定义元素,vue.js的编译器为它添加特殊功能。有些情况,组件也可以是原生HTML元素的形式,以is特性进行扩展。

那么is特性究竟是什么呢?有什么用途呢?

1、限制元素

其实简单的来说,因为vue模板就是dom模板,使用的是浏览器原生的解析器进行解析,所以dom模板的限制也就成为vue模板的限制了,要求vue模板是有效的HTML代码片段。但是由于dom的一些html元素对放入它里面的元素有限制,所以导致有些组件没办法放在一些标签中,比如<ul></ul> <select></select><a></a> <table></table>等等这些标签中,所以需要增加is特性来扩展,从而达到可以在这些受限制的html元素中使用。例如:

<ul>
 <li is="my-component"></li>
</ul>

而不能使用下面的方式,因为下面的方式会将自定义组件<my-component>当做无效的内容,导致错误的渲染结果

<ul>
 <my-component></mu-component>
<ul>

其实两种写法表达的意思是一致,但是第二种写法是不合法的,会导致错误。

2、动态组件

在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中<component>用:is来挂载不同的组件。

<div id="app" v-cloak>
    <component :is="currentView"></component>
    <button @click="handleChangeView('A')">A</button>
    <button @click="handleChangeView('B')">B</button>
    <button @click="handleChangeView('C')">C</button>
</div>

    var app = new Vue({
      el: '#app',
      components:{
        comA:{
          template:`
            <div>组件A</div>
          `
        },
        comB:{
          template:`
            <div>组件B</div>
          `
        },
        comC:{
          template:`
            <div>组件C</div>
          `
        }
      },
      data:{
        currentView:'comA'
      },
      methods:{
        handleChangeView:function(component){
          this.currentView='com'+component;
        }
      }
    });

我们在components中注册了三个模板,当我们点击当前按钮的时候,就会将模板切换模板,可以说是非常方便了。

以上这篇vue内置组件component--通过is属性动态渲染组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 #Javascript
微信小程序实现电子签名功能
Jul 29 #Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 #Javascript
浅谈JavaScript中this的指向问题
Jul 28 #Javascript
浅谈JavaScript中this的指向更改
Jul 28 #Javascript
Postman内建变量常用方法实例解析
Jul 28 #Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 #Javascript
You might like
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Django实现快速分页的方法实例
2017/10/22 Python
python实现音乐下载的统计
2018/06/20 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python3判断IP地址的方法
2021/03/04 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
政府采购方案
2014/06/12 职场文书
捐资助学感谢信
2015/01/21 职场文书
商务宴会祝酒词
2015/08/11 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL