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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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的图形函数中显示汉字
2006/10/09 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python如何实现邮件功能
2020/05/27 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
人大代表选举标语
2014/10/07 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
儿子满月酒致辞
2015/07/29 职场文书
Go 语言结构实例分析
2021/07/04 Golang