<template>
<component :is='fuck' :data='data'></component>
</template> <script>
export default {
data() {
return {
fuck: null
}
},
props: ['type', 'data'],
mounted() {
this.fuck = import(`/templates/${this.type || 'default'}`)
},
}
</script>

Vue 与 动态组件 import 的尝试的更多相关文章

  1. elementUI的动态tabs页的使用,vue的动态组件的操作

    elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...

  2. Vue.js动态组件

    动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...

  3. Vue实例 动态组件实现选项卡

    动态组件 选项卡 有n种实现方法 哈哈哈哈 <style> #app{ width: 260px; height: 200px; background: #fff; box-shadow: ...

  4. Vue中动态(import 、require)显示img图片

    vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...

  5. vue动态组件切换(选项卡)

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

  6. VUE3 之 动态组件 - 这个系列的教程通俗易懂,适合新手

    1. 概述 暗示效应告诉我们: 巧妙的暗示会在不知不觉中剥夺我们的判断力,对我们的思维形成一定的影响,造成我们行为的些许改变或者偏差. 例如你的朋友说你脸色不太好,是不是病了,此时,你可能就会感觉浑身 ...

  7. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  8. Vue动态组件的实践与原理探究

    我司有一个工作台搭建产品,允许通过拖拽小部件的方式来搭建一个工作台页面,平台内置了一些常用小部件,另外也允许自行开发小部件上传使用,本文会从实践的角度来介绍其实现原理. ps.本文项目使用Vue CL ...

  9. Vue两种组件类型介绍:递归组件和动态组件

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...

随机推荐

  1. redis-存储命令

    一.String类型: 1.赋值/取值 set key valueget key 2.设置/获取多个键值   mset key1 value1 key2 value2 …   mget key1 ke ...

  2. python基础之对象之间的交互

    面对对象编程之对象之间的交互 这是一个猫狗大战的例子 # 猫类 class Cat: def __init__(self, name, hp, attack): self.name = name # ...

  3. 认识Redis

    认识的Redis 官方原文: Redis is an open source (BSD licensed), in-memory data structure store, used as a dat ...

  4. Intel重大漏洞之Meltdown和Spectre

    史上最大漏洞危机:影响所有 iPhone.Android.PC 设备,修复困难重重 近日,英特尔的日子可并不好过. 作为全球知名芯片制造商,任何有关英特尔芯片漏洞的问题都会导致全球上百万设备遭受牵连. ...

  5. Tensorcore使用方法

    用于深度学习的自动混合精度 深度神经网络训练传统上依赖IEEE单精度格式,但在混合精度的情况下,可以训练半精度,同时保持单精度网络的精度.这种同时使用单精度和半精度表示的技术称为混合精度技术. ​混合 ...

  6. Linux学习22-文件上传与下载(rz,sz)

    前言 远程访问linux服务器的时候,我们本地电脑需要和linux服务器上有文件上传和下载的操作,如果安装过xshell和xftp工具,可以使用xftp上传文件和下载文件的操作. 如果不用xftp工具 ...

  7. 用于Python扩展包的非官方Windows二进制文件

    https://www.lfd.uci.edu/~gohlke/pythonlibs/ Index by date: peewee aiohttp indexed_gzip pygit2 pymatg ...

  8. cmake 编译windows程序

    cmake 编译windows程序 cmake 编译windows程序 cmake 编译windows程序 尽量使用  尽量使用 尽量使用 https://www.cnblogs.com/liujia ...

  9. iOS 开发,相关网址

    iOS 开发,相关网址 说明 网址 注册开发者 https://developer.apple.com/cn/programs/enroll/ 未付费688个人开发账号真机调试测试教程 http:// ...

  10. 如何解决inline-block元素的空白间距 css 完美解决

    转载W3CPLUS,链接地址:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inli ...