精华内容
下载资源
问答
  • vue中动态组件使用及传值

    千次阅读 2020-10-16 10:22:23
    component 组件:在页面中通过使用component元素,在根据组件中的is属性来动态的切换不同的组件。 demo: <template> //index.vue <div class="contain-wrap"> <input type="button" @click=...

    在项目中常常需要切换不同的组件,这时候我们就可以使用vue内置的动态组件的方式来实现。

    component 组件:在页面中通过使用component元素,在根据组件中的is属性来动态的切换不同的组件。

    demo:

    <template> //index.vue
      <div class="contain-wrap">
       <input type="button" @click="fatherBtn()" value="点击显示子组件">
      <component :is="which_to_show" @fatherEvent="btnclick" ></component>
      </div>
    </template>
    
    <script>
    import FoodNews from "./foodNews"
    import List from "./list"
    import About from "./about"
    export default {
      name: "index",
      components:{
        List,
        FoodNews,
      },
      data() {
        return {
          arr:['123','如图表'],
          content:'',
          which_to_show:"List",
          params:"动态主键之间的传参"
        };
      },
      methods:{
       btnclick(params){
         console.log(`呜呜~ 我被子组件${params}触发了 嘤嘤`)
       },
       fatherBtn(){
         let arr=["List","FoodNews"]
         let index=arr.indexOf(this.which_to_show)
         if(index<2){
           this.which_to_show=arr[index+1]
         }else{
           this.which_to_show = arr[0];
         }
       }
      },
      created() {},
    };
    </script>
    
    <style module lang="scss">
     .title{
           color:purple;
         }
    </style>
    
    

    子组件:

    <template>//foodNews.vue
      <div :class="$style.container">
           <input type="button" @click="btnClick()" value="子组件操作这个值">
      </div>
    </template>
    
    <script>
    export default {
      name: "FoodNews",
      data() {
        return {};
      },
      methods: {
         btnClick(){
           this.$emit("fatherEvent","foodNews")
        }
      }
    };
    </script>
    <style  module lang="scss">
       .container{
         width: 500px;
         height:500px;
          
       }
       .title{
           color:skyblue;
         }
    </style>
    
    
    <template>//list.vue
        <div class="contain-wrap" :style="{backgroundImage: 'url('+backgroundImg+')'}">
            <div class="contain" >
           <input type="button" @click="btnClick3()" value="List子组件操作这个值">
            </div>
            
        </div>
    </template>
    
    <script>
        import NxNav from "../components/NxNav";
        export default {
            name: "index",
            data() {
                return {
                 backgroundImg:require('@/assets/foot/17.jpg'),
                }
            },
            methods:{
                btnClick3(){
                 this.$emit("fatherEvent","list")
                }
            },
             mounted(){
    
        },
        }
    </script>
    
    <style scoped lang="scss">
        .contain-wrap{
            height: auto;
            min-height:500px;
            display: flex;
            flex-direction: column;
        }
    </style>
    

    点击点击显示子组件按钮就可以实现动态组件之间的切换。

    动态组件传参:
    通过上面的demo可以实现组件之间的切换,其实也是可以给动态组件传值的。
    demo: 还是上面那个demo只不过在上面加上了一些传值的内容

    //index.vue
      <component :is="which_to_show" :tt="params" :ff="arr" :yy="which_to_show"></component>
    
     props:{//list.vue
        tt:{
          type:String
        },
        ff:{
          type:Array
        },
        yy:{
          type:String
        }},
         created() {
            console.log(this.tt)
            console.log(this.yy)
            console.log(this.ff)
    
      },
    
     props:{//foodNews.vue
        tt:{
          type:String
        },
        ff:{
          type:Array
        },
        yy:{
          type:String
        }
      },
       created() {
            console.log(this.tt)
            console.log(this.yy)
            console.log(this.ff)
    
      },
    

    效果图:

    在这里插入图片描述

    通过控制台打印你会发现,只要绑定到动态组件上的属性,在每一个组件中都可以获取到,并且也可以在动态组件中绑定事件

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

     <keep-alive>
      <component @fatherEvent="btnclick"  :is="which_to_show" :tt="params" :ff="arr" :yy="which_to_show"></component>
      </keep-alive>
    

    通过使用keep-alive来存储被移除的组件的状态。这样用户再切换回来的时候仍然可以看到之前的内容。

    actived、deactivated钩子函数的使用
    keep-alive可以配合actived、deactivated钩子函数使用,actived表示在keep-alive缓存组件被激活时调用。deactivated表示在 keep-alive 缓存的组件被停用时调用。因此我们可以在这个钩子函数中做一些逻辑数据处理

    展开全文
  • vue中动态组件的使用

    千次阅读 2016-12-09 17:21:59
    动态组件的使用 虽然vue 已经提供了 v-if v-show来动态显示隐藏组件 同时也提供元素在一个挂载点上动态的切换组件,通过is

    动态组件的使用

    虽然vue 已经提供了 v-if  v-show来动态显示隐藏组件

    同时也提供<component>元素在一个挂载点上动态的切换组件,通过is来决定那个组件被渲染显示

    配合 <keep-alive>使用时,可以保留组件状态避免重新渲染(和v-show 比较的差别是v-show 是一开始就渲染的所有组件,而keep-alive 并不是一开始就渲染好所有组件,而已保留渲染过的组件)

    示例如下:

     <body>
            <div id="app">
                <component v-bind:is="show"></component>
                <button v-on:click="changeShow">change show</button>
            </div>
        </body>
    
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    show:'tem1'
                },
                components:{
                    tem1:{
                        template:'<div>11111111111</div>'
                    },
                      tem2:{
                        template:'<div>22222</div>'
                    },
                      tem3:{
                        template:'<div>333333</div>'
                    }
                },
                methods:{
                    changeShow:function(){
                        if(this.show=='tem1'){
                                this.show='tem2'
                        }else  if(this.show=='tem2'){
                                this.show='tem3'
                        }else{
                             this.show='tem1'
                        }
    
                    }
                }
    
            })
        </script>


    点击change show 会依次切换组件显示

    加入<keep-alive>

     <body>
            <div id="app">
            <keep-alive>
                 <component v-bind:is="show"></component>
            </keep-alive>
    
                <button v-on:click="changeShow">change show</button>
            </div>
        </body>
    
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    show:'tem1'
                },
                components:{
                    tem1:{
                        template:'<div>11111111111</div>'
                    },
                      tem2:{
                        template:'<div>22222</div>'
                    },
                      tem3:{
                        template:'<div>333333</div>'
                    }
                },
                methods:{
                    changeShow:function(){
                        if(this.show=='tem1'){
                                this.show='tem2'
                        }else  if(this.show=='tem2'){
                                this.show='tem3'
                        }else{
                             this.show='tem1'
                        }
    
                    }
                }
    
            })


    可以看到keep-alive 自身不会渲染成dom,并且对于减小的组件没有明显的显示渲染优化作用,所有推荐使用环境应该是较大页面频繁切换的情景下


    需要注意的是component 中可以添加id  但是不能添加class

    展开全文
  • https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/11440315.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.起到了延迟加载的作用。

    展开全文
  • vue中动态修改组件样式

    千次阅读 2020-07-07 18:18:24
    一般我们vue中动态修改一个组件的样式会用 :class :style等方法。 今天我在修改一个组件样式的时候发现覆盖不了原有样式 于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css...

    今天遇到了个难题,在次记录一下。
    一般我们vue中动态修改一个组件的样式会用 :class :style等方法。
    今天我在修改一个组件样式的时候发现覆盖不了原有样式
    于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css中使用vue变量呢?

    css 变量var()

    CSS中原生的变量定义语法是:–,变量使用语法是:var(–),其中*表示我们的变量名称。关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有,例如:

    :root {
      --1: #369;
    }
    body {
      background-color: var(--1);
    }
    

    在vue中应用

    首先在需要动态修改css的父元素或本身添加:style 设置css变量名,并绑定vue一个动态变量
    在这里插入图片描述
    然后在css中使用
    在这里插入图片描述
    到此为止 css中使用变量动态更新完成

    展开全文
  • 1.html:先在vue中做一个简单的选项卡效果。并把每个tab项都分成一个组件放起来。如下: 2.js部分:引入各个组件,并且实例化组件 创建一个items数组。并在绑定的toggleTab事件,根据点击事件来追加组件并...
  • VUE 实现动态组件

    千次阅读 2020-05-11 09:28:13
    <template> <div class="logmangement"> <!-- 上面按钮--> <div class= "buttontop" > <el-form class="button">...el-button @click="loginlog" :type="button11" size="mini">... .
  • vue动态引入组件

    千次阅读 2019-09-27 17:28:12
    vue动态引入组件 <el-main> <component :is="selectIndex" @changeMenu="selectMenu" :id="componentId" ></component> </el-main> <script> i...
  • vue 动态组件

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

    千次阅读 2018-10-08 21:51:38
    1.怎么使用动态组件? 1.&lt; component &gt;标签 2.:is属性 3.动态组件能自动切换组件,进行内容渲染 &lt;!DOCTYPE html&gt; &...vue动态组件&lt;/title&gt; &lt;
  • vue中动态渲染组件的方法

    万次阅读 2019-08-03 16:40:24
    在项目,我们会经常遇到动态加载不同组件(内容)的场景,也就是想通过一个页面,根据不同的参数或者条件,来加载不同的内容。那在vue里,给大家提供了一个很简单的方法,使用component组件来实现以上功能: <...
  • 教女朋友学习 vue中组件

    万次阅读 多人点赞 2020-04-28 15:56:48
    这篇博客对Vue中组件的基本知识做了详细的介绍,并有完整的示例。
  • vue中动态组件

    千次阅读 2018-03-15 20:01:37
    在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板切换,就是用vue中&lt;component&gt;用:is来挂载不同的组件。&lt;div id=&...
  • Vue中什么是动态组件

    千次阅读 2019-09-30 10:46:23
    简单的说,动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不...
  • Vue component动态组件/is属性

    千次阅读 2019-09-21 15:38:55
    动态组件:多个组件使用同一个挂载点,并动态切换。 必要条件: 组件标签使用:<component></component> 动态绑定使用is特性v-bind:is="" <div id="main"> <button @click="changeCom('...
  • lodop是目前最流行的打印Web打印组件,可以直接打印html 如何为lodop添加打印模板 ...2,界面定义一个div存放动态组件,把数据源Json加载到Vue中,加载打印模板生成组件,让lodop打印这个div就可以了
  • Vue动态组件

    万次阅读 2018-08-30 01:02:35
    本文将详细介绍Vue动态组件   概述  通过使用保留的 &lt;component&gt; 元素,动态地绑定到它的 is 特性,可以实现动态组件 &lt;div id="example"&gt; &lt;button @click...
  • vue中动态添加组件

    千次阅读 2018-12-02 20:10:46
    import leave from './components/leave.vue' export default {  name: 'createComponent',  data() {  return {  lst: [{  "id": "1"  }],  num: 1  }  },  components: {  leave  },  ...
  • vue动态加载组件

    千次阅读 2018-11-14 15:51:16
    本篇只对使用vue框架经验不足的开发者来参考和学习,各位技术... 随后就查阅资料发现了vue中的component is方法,原来我们的尤雨溪大大早已经考虑到这样的问题,才得以及时的挽救了我。  话不多说直接上代码: ...
  • vue动态组件详解

    千次阅读 2020-08-03 17:34:19
    1、 什么是动态组件 动态组件是指:在一个挂载点使用多个组件,并进行动态切换。可能对于新手来说,这句话有些难理解,什么是挂载点?可以简单的理解为页面的一个位置。 最常见的就是:tab的切换功能。 在vue要实现这...
  • 最近有空写下项目遇到的需求解决方案,这是年前的一个项目,需求是要跟有赞一样实现后台自定义装修(就是在后台系统用户自由编排组件的排序数量乃至颜色大小,前台显示出来)这里最后使用Vue中动态组件实现了...
  • vue-cli 工程 动态组件 使用

    千次阅读 2018-05-01 08:53:17
    在父组件中 我现在在 app.vue中 //首先准备你的切换的组件 &lt;template&gt; &lt;div id="app"&gt; &lt;!-- vue.js提供了一个特殊元素 component 用来动态挂载组件 使用is特性...
  • 当使用了keep-alive缓存动态组件以后,每次切换进入页面或者组件的时候会被缓存下来。如果进入一个页面后,使用mounted进行数据请求以后,会被缓存下来。在下一次进入页面,就不会再重新发起数据请求,直接从缓存...
  • vue中组件向子组件传值

    万次阅读 2018-06-01 16:15:16
    首先在以下案例中,App.vue是父组件,Second-module.vue是子组件。 总体来说,父传子就是这四个步骤:父组件的data中...首先,值肯定是定义在父组件中的,供所有子组件共享,所以要在父组件的data中定义值: ...
  • vue手写签名组件_Vue签名板组件

    千次阅读 2020-07-27 21:29:51
    vue手写签名组件 Vue签名板 (Vue Signature Pad) ... Vue组件包装,用于签名板。 View Demo 查看演示 Download Source 下载源 演示版 (Demo) Demo works in desktop and mobile browsers. You can check o...
  • 1在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatt...
  • 如何界定Vue中组件和子组件

    千次阅读 2019-01-03 21:58:21
    如何界定Vue中组件和子组件? 通过实例说明: &lt;div id="app"&gt; &lt;my-component :message="msg"&gt;&lt;/my-component&gt; &lt;/div&gt; &lt;...
  • vue中动态添加和删除组件缓存 keep-alive

    千次阅读 热门讨论 2019-10-30 16:09:07
    Vue的抽象组件,自身不会渲染一个DOM元素,也不会出现在父组件,能将组件在切换过程中将状态保存在内存,防止重复渲染DOM;包裹动态组建时,会缓存不活动的组件实例,而不是销毁它们;当组件在 内被切换时,它...
  • 如果要从父组件里面往这些字组件里面传数据,和普通的父组件-》子组件传递数据是一个道理,只不过在这个里面绑定一次属性,就可以在每个子组件里面都接收到数据,例如: :is= "current" :clients-data= ...
  • Vue动态创建组件方法

    千次阅读 2018-10-29 16:47:00
    组件写好之后有的时候需要动态创建组件。...富文本编辑器也就是第三方的组件,需要绑定一个值就跟input一样,但是其他的和平常都是一样的,根据这个特点我们就可以使用Vue的for循环去动态创建例如 <div> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 343,324
精华内容 137,329
关键字:

vue中动态组件

vue 订阅