首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏Vue2

    vue2知识点:动态组件

    @toc3.15.动态组件使用\<component>标签的is属性,动态绑定多个组件到一个挂载点,通过改变is绑定值,切换组件


    <component :is="page"></component>
    <script> /*** * 使用<component>标签的is属性,动态绑定多个组件到一个挂载点 :组件is属性12.vue2知识点:组件模板定义13.vue2知识点:组件的props属性、非props属性、props属性校验14.vue2知识点:组件自定义事件15.vue2知识点:组件插槽分发16 .vue2知识点:动态组件17.vue2知识点:混入18.vue2知识点:浏览器本地缓存19.vue2知识点:全局事件总线(GlobalEventBus)20.vue2知识点:消息订阅与发布21.vue2 知识点:nextTick语法22.vue2知识点:Vue封装的过度与动画23.vue2知识点:路由24.vue2知识点:vm调用待$命令介绍25.vue组件通信案例练习(包含:父子组件通信及平行组件通信

    34810编辑于 2024-10-27
  • 来自专栏计算机基础、算法、前后端

    Vue2(四)动态组件 插槽 路由

    上篇知识回顾: 什么是Vue组件? Vue组件从创建到销毁会经历哪些阶段? Vue组件之间如何实现数据共享? 本篇概要 怎么使用动态组件? 如何使用插槽来为用户预留自定义内容? vue-router在Vue框架下SPA项目的使用 一、动态组件 1. 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2.动态组件的使用 示例: <button @click="comName = 'Left'">展示 Left</button> <button @click="comName = 'Right'">展示 2. ​ vue中路由的功能其实底层是用动态组件来实现的,只不过框架已经帮我们封装好了,方便我们直接使用 3.

    2.1K30编辑于 2022-02-10
  • 来自专栏站长的编程笔记

    Vue组件动态组件

    动态组件:不同组件之间进行动态切换,通过 Vue 的 元素加一个特殊的 is attribute 实现 1. 基础使用 ---- component 的 is 属性值是组件名,就可以调用该组件 <component is="comb"></component>

    <component div>bbbb
    ' } let vm = new Vue({ el: '#app', components: { coma: coma, comb: comb, } }) </script> 2. 动态调用组件示例 ----
    <button @click="changeComponent('coma')">coma</button> <button @click="changeComponent

    1.3K30编辑于 2023-02-17
  • 来自专栏全栈开发那些事

    Vue动态组件

    Vue动态组件 1、序言 2、实例 1、序言   在页面应用程序中,经常会遇到多标签页面,在Vue.js中,可以通过动态组件来实现。 组件动态切换是通过在<component>元素上使用is属性实现的。 2、实例   实现效果如下:   上图中的3个标签是3个按钮,下面的内容部分由组件来实现,3个按钮对应3个组件,按钮响应click事件,单机不同按钮时切换至不同的组件组件切换通过<component 接下来就是在与实例关联的DOM模板中渲染按钮,以及动态切换组件的代码。 在本例中,希望组件在切换的时候,可以保持组件的状态,以避免重复渲染导致的性能问题,也为了让用户的体验更好。要解决这个问题,可以用一个<keep-alive>元素将动态组件包裹起来。

    1.6K20编辑于 2023-02-25
  • 来自专栏我的博客

    Vue自定义组件-动态组件

    /button.vue' import btn2 from '. current: { default: 'ex-btn' } }, components: { 'ex-btn': btn, 'ex-btn2': btn2 }, methods title="标题1" msg="按钮1"></ex-list> <ex-list current="ex-btn" title="标题<em>2</em>" msg="按钮<em>2</em>"></ex-list> console.log('beforeMount') }, // 组件写入dom结构之前 mounted: function () { // 组件写入dom结构了 console.log beforeDestroy') }, // 组件销毁之前 destroyed: function () { console.log('destroyed') }// 组件已经销毁 }

    1.4K20发布于 2019-12-11
  • 来自专栏快乐阿超

    antdv动态表单组件

    分享一个自己写的antdv动态表单组件 <! -- 动态表单组件 --> <template>

    '_key', }, /** * 指定动态表单表头和列 */ isPreview: { type: Boolean, default: () => false, }, /** * 数据,非受控组件可用 value: '0', label: '门派' }, { value: '1', label: '武侠' }, { value: '2'

    1.3K20编辑于 2022-08-21
  • 来自专栏全栈修仙之路

    Angular 动态创建组件

    本文我们将介绍在 Angular 中如何动态创建组件。 : 获取装载动态组件的容器。 调用组件容器对象的 createComponent() 方法创建组件并自动添加动态组件组件容器中。 基于返回的 ComponentRef 组件实例,配置组件相关属性(可选)。 在模块 Metadata 对象的 entryComponents 属性中添加动态组件: declarations —— 用于指定属于该模块的指令和管道列表。 通过 ComponentFactoryResolver 对象,我们实现了动态创建组件的功能。

    5K10发布于 2019-11-05
  • 来自专栏前端精读评论

    ComponentLoader 与动态组件

    动态组件,下面分别介绍。 ,以及动态组件。 ="abc" /> 但动态组件也有一些限制,如下: 该方式渲染的组件元信息定义的 defaultProps、props 不会生效,因为不存在于组件树中。 所以提供 ComponentLoader 势必会让业务能力更灵活,在任意位置渲染组件,甚至渲染一个不存在于组件树的动态组件。 讨论地址是:精读《ComponentLoader 与动态组件》· Issue #482 · dt-fe/weekly

    39910编辑于 2023-09-01
  • 来自专栏达达前端

    Vue组件的操作-自定义组件动态组件,递归组件

    app = new Vue({ el: '#app', data: { name: '' }, components: { MyComponent } }); </script> 动态组件动态地切换组件的显示内容,多个组件可以使用同一个挂载点。 '"> c2 </button> // 使用动态组件 <keey-alive> <component v-bind:is="currentComponent"> </component> </keey-alive >

    this is c2
    </template> <script> // 定义组件 const C1Component = { template: '#c1' }; const : 'C1Component' }, components: { C1Component, C2Component, } }); </script> 递归组件,需要有一个结束的判断,否则就会一直循环

    2.6K20发布于 2019-12-20
  • 来自专栏前端工程师面试指南

    vue源码分析-动态组件

    12.1 动态组件动态组件我相信大部分在开发的过程中都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件可以很好的满足我们的需求,其中的核心是component标签和is属性的使用。 12.1.1 基本用法例子是一个动态组件的基本使用场景,当点击按钮时,视图根据this.chooseTabs值在组件child1,child2,child3间切换。 ("," + children) : '') + ")") }12.1.4 普通组件动态组件的对比其实我们可以对比普通组件动态组件在render函数上的区别,结果一目了然。 ,组件标签名设置为任意自定义标签都可以达到动态组件的效果? 我们回忆一下之前父组件能访问到子组件的情形,从大的方向上有两个:- 1. 采用事件机制,子组件通过$emit事件,将子组件的状态告知父组件,达到父访问子的目的。 - 2.

    1.1K10编辑于 2022-10-19
  • 来自专栏站长的编程笔记

    fastadmin 动态下拉组件 SelectPage

    前言 FastAdmin 中的动态下拉列表使用的是优秀强大的 Selectpage 插件,FastAdmin 对其进行了二次开发 这个插件适合用于下拉框数据较多时,比如: 发布文章时选择哪个用户发布的。 并且支持下拉多选,非常实用 站长源码网 更多用法参考 FastAdmin 官方文档 2. 数据源 data-source 支持 Object 和 远程URL 返回两种方式,如: // Object data-source='[{"id":"1","name":"标题1"},{"id":"2" ,"name":"标题2"}]' // 远程URL data-source="category/selectpage" 当使用 远程URL 的方式时需要远程返回 JSON 数据,如: // 其中 list 为数据列表, total 为总记录数,总记录数将用于前端显示分页使用 {"list":[{"id":1,"name":"admin"},{"id":2,"name":"liang"}],"total"

    4.7K20编辑于 2022-12-16
  • 来自专栏简单的日记

    Vue 动态引入 组件地址

    return { // 是否显示弹出层 open: false, test:null, cmps:'task/index.vue' ###动态组件名称 }, //计算单独的组件 computed:{ loader(){ return () => import(`@/views/flowable/${this.cmps this.test = () => this.loader(); },) }, methods: { indexMethod() { ///TODO 网络加载 动态就改 this.cmps的地址,然后动态显示即可 } } };

    1.4K30发布于 2019-12-20
  • 来自专栏finleyMa

    Angular 组件动态传入模板

    组件的时候,一般都有默认模板,但是很多时候希望组件可以接收自定义模板。 比如 ng-zorro项目中的 BackTop回到顶部 组件就支持自定义模板。 关键字 ngTemplateOutlet 先看模板,ngTemplateOutlet 是一个指令,它接收模板变量,可以实现模板的动态渲染, 在这里,如果定义了 nzTemplate 变量就使用它,否则用默认的

    2.4K20发布于 2018-12-28
  • 来自专栏软件工程师Michael

    Vue3动态组件

    先上Vue3组件的实例代码:<! 运行效果:图片动态组件的写法:<! --动态组件-->

    <script> var app= Vue.createApp({ data(){ return }); app.mount("#michael"); </script></body></html>运行效果如下:图片[小结]在Vue3中,可以使用component标签进行组件输出 component标签需要配合:is属性来指定输出的组件名称,属性值为字符串component标签的所有的属性都会叠加到最终输出组件内容的最外层元素上

    1.4K30编辑于 2022-10-06
  • 来自专栏农历七月廿一

    vue动态组件的用法

    前文 今天写一篇关于vue组件的扩展用法, 之前将一些基本用法已经写过了,没有看过的可以自行找一下,今天要写的是一片关于vue 官方给的动态组件的一种用法,其实这个用法的使用场景使用基本组件也是可以胜任的 } </script> <style> </style> index <template>

    <el-button @click="showChild('A')">显示A组件 > <style scoped="scoped"> /deep/ .el-button { margin: 10px; } </style> 代码解析 上面三段就是实现了一个简单的动态组件的全部代码 ,childA组件是第一个子组件,childB组件是另一个子组件,我们引入组件的时候还是一样的import的方式,但是渲染的时候方式是直接使用component,使用:is来决定展示哪一个组件,这里使用 keep-alive的原因呢,组件每一次渲染都是全新的,会导致一个现象就是之前用户的操作丢失,为了保证用户的操作的原本性,使用缓存的标签就可以了,效果如下: 效果 ?

    1.1K20发布于 2020-10-26
  • 来自专栏码艺坊

    Vue2案例:封装动态的el-menu组件

    前言大家好,我是腾讯云开发者社区的 Front_Yue,本篇文章将介绍如何封装element-ui中动态的el-menu组件,希望能够对大家有所帮助。 在前端开发中,我们经常需要使用到菜单组件来实现页面的导航和功能选择。而在项目中我们经常会将Element-UI作为组件库来方便我们的开发。 我们需要根据后台返回的菜单数据动态生成菜单,同时支持菜单项的选中和展开状态的保存。1. 动态生成菜单为了实现动态生成菜单,我们需要将菜单数据从后台获取到,并将其转换成el-menu所需的格式。 2. 选中和展开状态的保存作为动态菜单,最重要的是,在封装el-menu时,我们需要支持菜单项的选中和展开状态的保存。 总结本篇文章介绍了如何封装成动态的el-menu组件,文章介绍了组件初始示例,到如何根据动态菜单数据封装动态组件,我们通过封装组件,来提高在项目中的开发效率。

    1.9K31编辑于 2024-01-30
  • 来自专栏蓝桥杯历年省赛真题集

    动态规划(2

    例如24-17-16-1,其实25-24-23…3-2-1更长,事实上这是最长的一条。 输入格式: 第1行: 两个数字r,c(1< =r,c< =100),表示矩阵的行列。 第2..r+1行:每行c个数,表示这个矩阵。 输出格式: 仅一行: 输出1个整数,表示可以滑行的最大长度。 样例输入 5 5 1 2 3 4 5 16 17 18 19 6 15 24 25 20 7 14 23 22 21 8 13 12 11 10 9 样例输出 25 ---- 分析题目

    59640发布于 2019-01-21
  • 来自专栏落叶飞翔的蜗牛

    动态代理(2

    CGLIB 动态代理机制 JDK 动态代理有一个最致命的问题是其只能代理实现了接口的类。为了解决这个问题,我们可以用 CGLIB 动态代理机制来避免。 String message) { System.out.println("send message:" + message); return message; } } 2. CGLIB 动态代理对比 JDK 动态代理只能代理实现了接口的类,而 CGLIB 可以代理未实现任何接口的类。 静态代理和动态代理的对比 灵活性 :动态代理更加灵活,不需要必须实现接口,可以直接代理实现类,并且可以不需要针对每个目标类都创建一个代理类。 而动态代理是在运行时动态生成类字节码,并加载到 JVM 中的。

    42840发布于 2021-01-19
  • 来自专栏前端全栈开发者

    Vue.js动态组件解析

    什么是动态组件绑定?简单的说,就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。 is属性 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示;改变挂载的组件,只需要修改is指令的值即可。 -- 非活动组件将被缓存 --> <component :is="currentView"></component></keep-alive> Vue.js为其组件设计了一个keep-alive 特性,如果这个特性存在,那么在组件被重复创建时,会通过缓存机制快速创建组件,以提升视图更新性能。 function(data) { _this.someData = data; done(); }); }}); activate钩子只作用于动态组件切换或静态组件初始化渲染的过程中

    4.9K40发布于 2019-12-25
  • 来自专栏给永远比拿愉快

    Java Swing中动态删除组件

    今天在完成一个JDialog,界面中有删除按钮,用户点击后删除特定的组件。 其实,自己Java Swing也是边学边用,搞了一下午,自己先使用removeAll()方法删除组件,然后实验了什么repaint()方法,validate()都不行。     this.contentPanel.setVisible(false); this.addComponent(); this.contentPanel.setVisible(true);     addComponent()方法是我自己写的动态添加组件的方法

    2.6K30发布于 2019-01-25
  • 领券