component动态组件 / is属性

让多个组件使用同一个挂载点,并动态切换,这就是动态组件。

必要条件:

  • 组件标签使用<component></component>
  • 动态绑定使用is特性v-bind:is=""
 <div id="app">
<button @click="changeCom('home')">Home</button>
<button @click="changeCom('page')">page</button>
<button @click="changeCom('about')">About</button> <component :is="variable"></component>
</div>
const vm = new Vue({
el: "#app",
components: {
home: {template: `<div>home</div>`},
page: {template: `<div>page</div>`},
about: {template: `<div>about</div>`},
},
data: {
variable: 'home'
},
methods: {
changeCom(name) {
this.variable = name
}
}
})

is绑定组件的是组件name属性值,也可以绑定一个组件的构造器选项对象。

<component :is="comOptions"></component>
data: {
comOptions: {
template: `<div>直接传入一个组件的选项对象</div>`,
}
},

vue-learning:34 - component - 内置组件 - 动态组件component 和 is属性的更多相关文章

  1. vue组件---动态组件&异步组件

    (1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...

  2. Laravel 5.3 使用内置的 Auth 组件实现多用户认证功能

    https://blog.csdn.net/kevinbai_cn/article/details/54341779 概述 在开发中,我们经常会遇到多种类型的用户的认证问题,比如后台的管理员和前台的普 ...

  3. amazeui中内置的web组件有哪些且如何用

    amazeui中内置的web组件有哪些且如何用 一.总结 一句话总结: 1.组件还是jquery.js+amazeui.js,和插件一样,准确的说是amazeui.css+jquery.js+amaz ...

  4. Vuejs——(12)组件——动态组件

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  5. vue-learning:34 - component - 内置组件 - 缓存组件keep-alive

    vue内置缓存组件keep-alive <keep-alive>标签内包裹的组件切换时会缓存组件实例,而不是销毁它们.避免多次加载相应的组件,减少性能消耗.并且当组件在 <keep- ...

  6. vue-learning:33 - component - 内置组件 - 过渡组件transition

    vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...

  7. vue第十一单元(内置组件)

    第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件,作用是:配 ...

  8. vue深入了解组件——动态组件&异步组件

    一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...

  9. Vue组件-动态组件

    动态组件 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以让多个组件使用同一个挂载点,并动态切换: <div id="app6"& ...

随机推荐

  1. oracle 数据库安全审计

    Oracle的审计机制是用来监视用户对ORACLE数据库所做的各种操作. 在缺省情况下,系统的审计功能是关闭的.可以在INIT.ORA参数文件中将参数AUDIT_TRAIL设置为正整数来激活. 审计功 ...

  2. PLAY2.6-SCALA(四) 请求体解析器

    一个http请求是一个请求头后面跟着一个请求体,头部信息比较短,可以安全的缓存在内存中,在Play中头部信息使用RequestHeader类进行建模.请求体的内容可能较大,使用流stream的形式进行 ...

  3. JavaScript--模拟百度搜索下拉li

    上效果: 主要思路: 函数indexOf() .join().innerHTML的使用,还有 用完的数组要清空 <!DOCTYPE html> <html> <head ...

  4. hdu5444 乱搞 长春网赛

    可以暴力. #include<iostream> #include<cstring> #define maxn 1100 using namespace std; int a[ ...

  5. 非阻塞模式下,虽然connect出错,但是getsockopt取得的错误却是0的问题

    调试项目代码时,发现了一个奇怪问题,记录如下: 非阻塞模式下,connect发起建链,返回-1(这在非阻塞模式下是很正常的现象).然后将该socket的写事件进行监听,在写事件触发后,getsocko ...

  6. 免费的容器架构可视化工具 | 阿里云应用高可用服务 AHAS 发布重大新特性

    工具下载链接:点这里.活动发布链接:点这里. 采用容器服务后,了解容器之间的关系及依赖是一个比较有挑战的问题.容器化改造后的实际架构模型可能与预想的架构存在较大的差异,架构师或系统运维人员需要精确地了 ...

  7. hdu 6197 2017 ACM/ICPC Asia Regional Shenyang Online array array array【最长不上升子序列和最长不下降子序列】

    hdu 6197 题意:给定一个数组,问删掉k个字符后数组是否能不减或者不增,满足要求则是magic array,否则不是. 题解:队友想的思路,感觉非常棒!既然删掉k个后不增或者不减,那么就先求数组 ...

  8. ROS 用 roboware实现节点信息发送和接收

    在ros下实现节点编程,实现一个节点发送消息,另一个节点接收.实现方式有多种,可以直接在命令窗口创建工作空间包以及节点,用catkin_make进行编译,添加.bash路径,然后执行rosrun  p ...

  9. Oracle函数——COALESCE

    COALESCE 含义:COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值 ...

  10. PyODPS DataFrame 的代码在哪里跑

    在使用 PyODPS DataFrame 编写数据应用时,尽管编写的是同一个脚本文件,但其中的代码会在不同位置执行,这可能导致一些无法预期的问题,本文介绍当出现相关问题时,如何确定代码在何处执行,以及 ...