Vue_(组件通讯)动态组件
动态组件 传送门
在一个元素上挂载多个组件，根据不同状态进行切换的时候，可以使用动态组件
动态组件的使用：需要使用内置组件<component></component>，根据 :is 的值决定显示哪个组件，:is的值是要显示的组件id
目录结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data:{
selectedName:'my-component-a'
},
components:{
"my-component-a":{
template:"<h1>Hello Vue</h1>"
},
"my-component-b":{
template:"<a href='https://www.cnblogs.com/1138720556Gary/'>Gary博客</a>"
},
"my-component-c":{
template:"<p>欢迎来到Gary博客</p>"
}
}
}).$mount("#GaryId");
</script>
</html>
Gary_dynamic_component.html
实现过程
Vue的data域中为组件申请一个名称
data:{
selectedName:'my-component-a'
},
<div>标签中标明使用'my-component-a'组件模板
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div>
在Vue的components中标明组件模块
new Vue({
data:{
selectedName:'my-component-a'
},
components:{
"my-component-a":{
template:"<h1>Hello Vue</h1>"
},
"my-component-b":{
template:"<a href='https://www.cnblogs.com/1138720556Gary/'>Gary博客</a>"
},
"my-component-c":{
template:"<p>欢迎来到Gary博客</p>"
}
}
}).$mount("#GaryId");
Vue_(组件通讯)动态组件的更多相关文章
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)父子组件简单关系
Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...
- Hibernate学习---第五节：普通组件和动态组件
一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...
- Vue两种组件类型介绍：递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- [Vue]组件——实现动态组件：keep-alive的使用
1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来: keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存 <keep- ...
- Vue 组件4 动态组件
动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...
- Vue组件的操作-自定义组件，动态组件，递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
随机推荐
- Codeforces Round #406 (Div. 2) A MONSTER
A. The Monster time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- 单元操作和仓储模式 repository+unitOfWork
仓储和工作单元模式是用来在数据访问层和业务逻辑层之间创建一个抽象层.应用这些模式,可以帮助用来隔离你的程序在数据存储变化. 在数据源层和业务层之间增加一个repository层进行协调,有如下作用:1 ...
- HDU3085NightmareII题解--双向BFS
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3085 分析 大意就是一个男孩和一个女孩在网格里,同时还有两个鬼,男孩每轮走三步,女孩每轮走一步,与鬼曼 ...
- java实现spark常用算子之Sample
import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...
- vue学习（3）-增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js多语言切换demo
网站为了国际化的需要,会使用到语言包,案例如下图. 这次尝试用js来打语言包,用到了插件 jquery.i18n.properties ,很明显,使用这个插件需要先加载jquery. 代码布局结构 ...
- go语言入门（2）数据类型
1,命名 Go语言中的函数名.变量名.常量名.类型名.语句标号和包名等所有的命名,都遵循一个简单的命名规则:一个名字必须以一个字母(Unicode字母)或下划线开头,后面可以跟任意数量的字母.数字或下 ...
- 构建虚拟工控环境系列 - 西门子虚拟PLC
一. 概述 跟随着工控安全一路走来,工控安全市场今年明显有相当大的改善,无论从政策还是客户需求,都在逐步扩大中.但是,搞工控安全研究的人员却寥寥无几.一方面工控安全是个跨学课的技术,需要了解多方面的知 ...
- vue中 localStorage的使用方法（详解）
vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cooki ...
- 自然语言处理(三) 预训练模型：XLNet 和他的先辈们
预训练模型 在CV中,预训练模型如ImagNet取得很大的成功,而在NLP中之前一直没有一个可以承担此角色的模型,目前,预训练模型如雨后春笋,是当今NLP领域最热的研究领域之一. 预训练模型属于迁移学 ...