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中的16进制字符(改进)
Nov 21 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
JS函数式编程实现XDM一
Jun 16 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
vue 中的 render 函数作用详解
2020/02/28 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python实现图片转字符画的示例
2017/08/22 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python如何求100以内的素数
2020/05/27 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
上课打牌的检讨书
2014/02/15 职场文书
幼儿教师培训感言
2014/03/08 职场文书
《桥》教学反思
2014/04/09 职场文书
纪检监察建议书
2014/05/19 职场文书
销售队伍口号
2014/06/11 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
学生会干部任命书
2015/09/21 职场文书
技术转让协议书
2016/03/19 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript