精华内容
参与话题
问答
  • vue中使用动态组件

    千次阅读 2018-10-08 21:51:38
    1.怎么使用动态组件? 1.< component >标签 2.:is属性 3.动态组件能自动切换组件,进行内容渲染 <!DOCTYPE html> <html> <head> <meta charset=&...

    1.怎么使用动态组件?

    • 1.< component >标签
    • 2.:is属性
    • 3.动态组件能自动切换组件,进行内容渲染
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>vue动态组件</title>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<component :is="type"></component>
    		<button @click="headleBtnClick">change</button>
    	</div>
    	<script>
    		Vue.component('child-one',{
    			template: '<div v-once>child-one</div>'
    		})
    
    		Vue.component('child-two',{
    			template: '<div v-once>child-two</div>' //动态组件每次回销毁一个组件,再创建另一个组件进行显示。  
    			//v-once指令可以将静态内容加载入内存中,  
    		})
    
    		var vm = new Vue({
    			el: '#app',
    			data: {
    				type: 'child-one'
    			},
    			methods: {
    				headleBtnClick: function(){
    					this.type = (this.type === 'child-one'?'child-two' : 'child-one' )
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    
    展开全文
  • vue——动态组件

    万次阅读 2017-12-27 19:38:13
    通过使用保留的 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换。...Vue 测试实例 - 动态组件 点击显示子组件 // 创建根实例 new Vue({ el: '#app', da

    通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件,如果匹配不到则不显示。

    改变挂载的组件,只需要修改is指令的值即可。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 动态组件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	<button @click='toShow'>点击显示子组件</button>
    	<component v-bind:is="which_to_show"></component>
    </div>
    
    <script>
    
    // 创建根实例
    new Vue({
      el: '#app',
      data:{
    	  which_to_show:'first'
      },
    	methods:{
    		toShow:function(){
    			var arr = ["first","second","third"];
    			var index = arr.indexOf(this.which_to_show);
    			if(index<2){
    				this.which_to_show = arr[index+1];
    			}else{
    				this.which_to_show = arr[0];
    			}
    		}
    	},
    	components:{
    		first:{
    			template:'<div>这是子组件1<div>'
    		},
    		second:{
    			template:'<div>这是子组件2<div>'
    		},
    		third:{
    			template:'<div>这是子组件3<div>'
    		},
    	}
    })
    </script>
    </body>
    </html>


    #keep-alive

    动态切换掉的组件(非当前显示的组件)是被移除掉了,如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 动态组件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	<button @click='toShow'>点击显示子组件</button>
    	<!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
    	<keep-alive>
    	<component v-bind:is="which_to_show" ></component>
    	</keep-alive>
    </div>
    
    <script>
    
    // 创建根实例
    new Vue({
      el: '#app',
      data:{
    	  which_to_show:'first'
      },
    	methods:{
    		toShow:function(){
    			var arr = ["first","second","third"];
    			var index = arr.indexOf(this.which_to_show);
    			if(index<2){
    				this.which_to_show = arr[index+1];
    			}else{
    				this.which_to_show = arr[0];
    			}  console.log(this.$children); 
    		}
    	},
    	components:{
    		first:{
    			template:'<div>这是子组件1<div>'
    		},
    		second:{
    			template:'<div>这是子组件2<div>'
    		},
    		third:{
    			template:'<div>这是子组件3<div>'
    		},
    	}
    })
    </script>
    </body>
    </html>

    说明:

    初始情况下,vm.$children属性中只有一个元素(first组件),

    点击按钮切换后,vm.$children属性中有两个元素,

    再次切换后,则有三个元素(三个子组件都保留在内存中)。

    之后无论如何切换,将一直保持有三个元素。


    actived钩子

    可以延迟执行当前的组件。
    具体用法来说,activate是和template、data等属性平级的一个属性,形式是一个函数,函数里默认有一个参数,而这个参数是一个函数,执行这个函数时,才会切换组件。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 动态组件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	<button @click='toShow'>点击显示子组件</button>
    	<!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
    	<keep-alive>
    	<component v-bind:is="which_to_show" ></component>
    	</keep-alive>
    </div>
    
    <script>
    
    // 创建根实例
    var vm = new Vue({  
            el: '#app',  
            data: {  
                which_to_show: "first"  
            },  
            methods: {  
                toShow: function () {   //切换组件显示  
                    var arr = ["first", "second", "third", ""];  
                    var index = arr.indexOf(this.which_to_show);  
                    if (index < 2) {  
                        this.which_to_show = arr[index + 1];  
                    } else {  
                        this.which_to_show = arr[0];  
                    }  
                   console.log(this.$children);  
                }  
            },  
            components: {  
                first: { //第一个子组件  
                    template: "<div>这里是子组件1</div>"  
                },  
                second: { //第二个子组件  
                    template: "<div>这里是子组件2,这里是延迟后的内容:{{hello}}</div>",  
                    data: function () {  
                        return {  
                            hello: ""  
                        }  
                    },  
                    activated: function (done) { //执行这个参数时,才会切换组件  
    					console.log('hhh')
                        var self = this; 
    					var startTime = new Date().getTime(); // get the current time   
    					//两秒后执行
                        while (new Date().getTime() < startTime + 2000){
    						self.hello='我是延迟后的内容';
    					}
    					
                    }  
                },  
                third: { //第三个子组件  
                    template: "<div>这里是子组件3</div>"  
                }  
            }  
        });  
    </script>
    </body>
    </html>

    当切换到第二个组件的时候,会先执行activated钩子,会在两秒后显示组件2.起到了延迟加载的作用。
    展开全文
  • 动态组件

    2018-09-27 11:15:40
    vue实现动态组件的两种方法 一种是使用v-if条件渲染: 当seen=0的时候,使用按钮组件,否则使用箭头组件 子组件: &amp;lt;template&amp;gt; &amp;lt;div class=&quot;qui-list&quot;&...

    vue实现动态组件的两种方法

    一种是使用v-if条件渲染:

    当seen=0的时候,使用按钮组件,否则使用箭头组件

    子组件:
    <template>
    	<div class="qui-list">
    		<span class="list-tips">{{tipsText}}</span>
    		<qui-btn v-on:btnClickEvent='clickEvent' :msg=msg class='small' v-if='seen==0' :seen=seen></qui-btn>
    		<qui-arrow v-on:btnClickEvent='clickEvent' :msg=msg class='small' v-else :seen=seen>
    			<img src="xxx.png" slot='icon' class="ico" alt="">
    		</qui-arrow>
    	</div>
    </template>
    <script>
    //按钮组件
    import quiBtn from '../components/quiButton.vue'
    //箭头组件
    import quiArrow from '../components/quiArrow.vue'
    export default{
    props:{
    msg:{
    default:'上传'
    },
    tipsText:{
    default: '默认的文案1'
    },
    currentView:{
    default: 'qui-btn'
    },
    seen:{
    default:0
    }
    },
    components:{
    'qui-btn':quiBtn,
    'qui-arrow':quiArrow
    },
    methods:{
    clickEvent:function(){
    alert('...')
    }
    }
    }
    </script>
    
    父组件:
    <template>
    	<div class="pageQuiList">
    		<qui-list tipsText='文件1' msg='下载1' seen='0'></qui-list><!-- 按钮组件 -->
    		<qui-list v-on:btnClickEvent="test" msg='下载2' tipsText='文件2'></qui-list><!-- 按钮组件 -->
    		<qui-list ref="child1" tipsText="文件3" currentView="qui-arrow" msg='下载3' seen='1'></qui-list><!-- 箭头组件 -->
    	</div>
    </template>
     
    <script>
    	import quiList from '../components/quiList.vue'
    	export default{
    		name:'pageQuiList',
    		components:{
    			'qui-list': quiList
    		},
    		methods:{
    			test:function(){
    				alert('sss')
    			}
    		}
    	}
    </script>
    

    第二种是使用is的特性+component实现:

    子组件:
    <template>
    	<div class="qui-list">
    		<span class="list-tips">{{tipsText}}</span>
    		<!-- <qui-btn v-on:btnClickEvent='btnClickEvent1' :msg=msg class='small'></qui-btn> -->
    		<component :is='currentView' v-on:btnClickEvent='clickEvent' :msg=msg class="small" keep-alive></component>
    	</div>
    </template>
     
     
    <script>
    	import quiBtn from '../components/quiButton.vue'
    	import quiArrow from '../components/quiArrow.vue'
    	export default{
    		props:{
    			msg:{
    				default:'上传'
    			},
    			tipsText:{
    				default: '默认的文案1'
    			},
    			currentView:{
    				default: 'qui-btn'
    			}
    		},
    		components:{
    			'qui-btn':quiBtn,
    			'qui-arrow':quiArrow
    		},
    		methods:{
    			clickEvent:function(){
    				alert('...')
    			}
    		}
    	}
    </script>
    
    父组件:
    <template>
    	<div class="pageQuiList">
    		<qui-list tipsText='自定义文案,默认右边是按钮' msg='弹层'></qui-list>
    		<qui-list v-on:btnClickEvent="test"></qui-list>
    		<qui-list ref="child1" tipsText="最右边是箭头" currentView="qui-arrow"></qui-list>
    	</div>
    </template>
     
     
    <script>
    	import quiList from '../components/quiList.vue'
    	export default{
    		name:'pageQuiList',
    		components:{
    			'qui-list': quiList
    		},
    		methods:{
    			test:function(){
    				alert('sss')
    			}
    		}
    	}
    </script>
    
    展开全文
  • 动态组件切换的2种实现方式

    千次阅读 2019-05-03 13:52:42
    动态组件,其实就是一个tab页面切换的功能。可以直接使用vue的component,也可以使用v-if来实现。具体如下: 方法一 <div id="example"> <button @click="change">切换页面</button> <...

    动态组件,其实就是一个tab页面切换的功能。可以直接使用vue的component,也可以使用v-if来实现。具体如下:

    方法一

    <div id="example">
        <button @click="change">切换页面</button>
        <keep-alive>
            <component :is="currentView"></component>
        </keep-alive>
    </div>

    is可绑定的值可以是组件名称,也是是一个组件对象。通过动态切换绑定的值,就可以实现tab页式的效果。

    下例是组件名称的方式:

     new Vue({
                    el: "#example",
                    data:{
                        index: 0,
                        attrs:["page1","page2","page3"]
                    }
                    ,components: {
                        page1:{template:`<div>组件页1</div>`},
                        page2:{template:`<div>组件页2</div>`},
                        page3:{template:`<div>组件页3</div>`},
                    },methods:{
                        change:function () {
                            const len = this.attrs.length
                            this.index = (++this.index)%len
                        }
                    },computed:{
                        currentView:function () {
                            return this.attrs[this.index]
                        }
                    }
                })

    下例是组件对象的方式:

    new Vue({
                    el: "#example",
                    data:{
                        index: 0,
                        attrs:[
                            {template:`<div>组件页1</div>`}
                            ,{template:`<div>组件页2</div>`}
                            ,{template:`<div>组件页3</div>`}
                        ]
                    }
                   ,methods:{
                        change:function () {
                            const len = this.attrs.length
                            this.index = (++this.index)%len
                        }
                    },computed:{
                        currentView:function () {
                            return this.attrs[this.index]
                        }
                    }
                })

    方法二

    使用v-if,v-else-if,v-else来控制显示具体的哪一个组件。

     <div id="example_demo">
                <button @click="change">切换页面</button>
                <keep-alive>
                    <home v-if="index===0"></home>
                    <posts v-else-if="index===1"></posts>
                    <archive v-else></archive>
                </keep-alive>
            </div>
    new Vue({
                    el: "#example_demo",
                    data:{
                        index: 0,
                    }
                    ,components: {
                        home:{template:`<div>我是主页</div>`},
                        posts:{template:`<div>我是提交页</div>`},
                        archive:{template:`<div>我是存档页</div>`},
                    },methods:{
                        change:function () {
                            let len = Object.keys(this.$options.components).length
                            this.index = (++this.index)%len
                        }
                    }
                })

    组件激活事件

    当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

    {
                                template:`<div>组件页1</div>`,
                                activated(){
                                    this.$emit('pass-data', "组件被添加")
                                },
                                deactivated(){
                                    this.$emit('pass-data', "组件被移除")
                                }
                            }

    可用如上所示代码添加添加这2个生命期钩子函数,然后通过自定义事件的方式,向外发送事件通知。

    组件有条件地缓存【include和exclude

    • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    • max - 数字。最多可以缓存多少组件实例。

    匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配

    具体示例如下:

    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    <!-- 正则表达式 (使用 v-bind) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    <!-- Array (use v-bind) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

    参考网站:https://www.cnblogs.com/shitaotao/p/7624657.html

    展开全文
  • 动态组件

    2020-01-02 15:06:37
    有的时候,在不同的组件之间进行动态的切换时非常有用的,比如在一个多标签的界面里: 上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现: <!-- 组件会在 `currentTabComponent` 改变...
  • 【vue学习】动态组件和异步组件

    千次阅读 2019-07-24 14:00:35
    动态组件 有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里: is 上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现 <component v-bind:is=...
  • 动态组件 VS 异步组件

    2019-04-24 17:04:09
    1. 动态组件 动态组件就是 component组件 , 组件身上可以绑定一个is属性, 用来表示某一个组件。 通过使用保留的  元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,...
  • Vue中什么是动态组件

    千次阅读 2019-09-30 10:46:23
    让多个组件使用同一个挂载点,并动态切换,这就是动态组件 简单的说,动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件...
  • 动态组件

    2019-02-21 22:04:23
    1.动态组件前奏 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态组件前奏&lt;/...
  • 动态组件

    2020-04-02 22:23:38
    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head>......
  • Vuejs——(12)组件——动态组件

    千次阅读 2016-09-09 00:00:05
    本篇资料来于官方文档: ... 本文是在官方文档的基础上,更加细致的说明,代码更多更全。...(二十九)组件——动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,
  • vue 动态组件

    千次阅读 2019-01-11 16:41:10
    动态组件就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。 在挂载点使用 component 标签,然后使用 is =“组件名”,它会自动去找匹配的组件名,如果有,则显示; 看例子: ...
  • Vue动态组件

    千次阅读 2018-08-30 01:02:35
     让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件   概述  通过使用保留的 &lt;component&gt; 元素,动态地绑定到它的 is 特性,可以实现动态组件 &lt...
  • Vuejs——(12)组件——动态组件

    千次阅读 2016-09-09 09:26:50
    版权声明:我萌么~萌!么么哒~ 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,...(二十九)组件
  • vue踩坑系列——动态组件

    万次阅读 2017-05-19 11:20:20
    vue实现动态组件的两种方法 效果图: 右侧按钮是动态组件,分为按钮组件和箭头组件 一种是使用v-if条件渲染: 当seen=0的时候,使用按钮组件,否则使用箭头组件 子组件: {{tipsText}} //...
  • vue.js 动态组件缓存 keep-alive

    千次阅读 2018-10-09 00:25:56
    文章目录动态组件如图代码问题keep-alive代码UI 框架的 Tabs 组件(iView)例子 动态组件 在不同组件之间进行动态切换 比如:选项卡,点击不同的tab显示相应的组件。 注意:页面上只有当前选择的组件,而不是把...
  • angular动态组件探坑之旅

    千次阅读 2018-07-03 14:48:18
    angular动态组件有两种创建方式,这篇只说一种,用大白话讲,就是先把要用到的各种组件提前写好,然后在需要的地方动态调用。第一步:先准备若干要用到的组件,直接上图(因为这儿需要传递参数,所以组件中会有input...
  • 组合组件 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型、独立和可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树。换种说法,组件就是一个个小的可复用...
  • vue中动态渲染组件

    万次阅读 2020-04-29 15:42:33
    https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/11440315.html 自己的代码 <template> <div class="top"> ...div class="top_div">......
  • vue-cli 工程中 动态组件 使用

    千次阅读 2018-05-01 08:53:17
    参考文档 is 属性和内置组件 component 代码实例: 在父组件中 我现在在 app.vue中 ...-- vue.js提供了一个特殊元素 component 用来动态挂载组件 使用is特性来选择挂载的组件--&gt; &lt;component ...

空空如也

1 2 3 4 5 ... 20
收藏数 479,845
精华内容 191,938
关键字:

动态组件