10.component动态组件

最新推荐文章于 2024-05-28 11:13:26 发布

zhuhui2000

最新推荐文章于 2024-05-28 11:13:26 发布

阅读量814

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/zhuhui2000/article/details/96173045

版权

vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.当我们在需要用到多个类似功能组件的时候（如导航栏），按照原始的写法会非常麻烦，先看一下原始的写法：

这里实现的是点击哪一个页面，该页面相对应的内容也显示出来


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props传值</title>
    <script src="./vue.js"></script>
</head>
<body>
        <div id="app">
            <div style="display: flex;color: red" >
              <div v-on:click="off = 'a'">a页面</div>
                <div v-on:click="off = 'b'">b页面</div>
                <div v-on:click="off = 'c'">c页面</div>
                <div v-on:click="off = 'd'">d页面</div>
                <div v-on:click="off = 'e'">e页面</div>
                <div v-on:click="off = 'f'">f页面</div> 
         
            </div>
             <my-a v-if="off=='a'" ></my-a>
            <my-b v-if="off=='b'"></my-b>
            <my-c v-if="off=='c'" ></my-c>
            <my-d v-if="off=='d'"></my-d>
            <my-e v-if="off=='e'" ></my-e>
            <my-f v-if="off=='f'"></my-f>
        </div>
    <script>
    var myA = {template:"<div>我是A</div>"} 
    var myB = {template:"<div><div v-for='value in [1,2,3,4,5]'>{{value}}</div></div>"}
    var myC = {template:"<div>我是C</div>" } 
    var myD = {template:"<div>我是D</div>" } 
    var myE = {template:"<div>我是E</div>" } 
    var myF = {template:"<div>我是F</div>" } 
    var app = new Vue({
            el:"#app",
            data:{
               val:"哈哈哈",
               off:"a"
            },
            components:{
                myA,myB,myC,myD,myE,myF
            }
           
        })
    </script>
</body>
</html>

在这里插入图片描述
这里我们可以看到这种写法会非常复杂，重复的代码非常多，下面我们使用动态组件的来对其进行优化

2.动态组件：让多个组件使用同一个挂载点，并动态切换，这就是动态组件
看一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props传值</title>
    <script src="./vue.js"></script>
</head>
<body>
        <div id="app">
            <div style="display: flex;color: red" >
            <div v-for="val in array" v-on:click="off=val.name">{{val.text}}</div>
            </div>
            <keep-alive><component v-bind:is="off"></component></keep-alive>
            
        </div>
    <script>
    var myA = {
        template:"<div v-on:click='x+=1'>{{x}}</div>",
        data:function(){
            return{
                x:1
            }
        } 
        } 
    var myB = {template:"<div><div v-for='value in [1,2,3,4,5]'>{{value}}</div></div>"}
    var myC = {template:"<div>我是C</div>" } 
    var myD = {template:"<div>我是D</div>" } 
    var myE = {template:"<div>我是E</div>" } 
    var myF = {template:"<div>我是F</div>" } 
    var app = new Vue({
            el:"#app",
            data:{
               val:"哈哈哈",
               off:"my-a",
               array:[
                   {name:"my-a",text:"我是my-a"},
                   {name:"my-b",text:"我是my-b"},
                   {name:"my-c",text:"我是my-c"},
                   {name:"my-d",text:"我是my-d"},
                   {name:"my-e",text:"我是my-e"},
                   {name:"my-f",text:"我是my-f"}

               ]
            },
            components:{
                myA,myB,myC,myD,myE,myF
            }
           
        })
    </script>
</body>
</html>

主要代码解释：

这里将我们每个组件的名字与内容存放在一个数组中
在id为app的元素中，我们使用v-for来循环遍历刚刚定义的数组，并且给这个数组中的每一个名字绑定点击事件，同时渲染出数组中的text部分内容
使用v-bind绑定我们的off值，off是我们自定义的，表示组件的子组件名，这里如果off值发生改变，对应的渲染结果也不宜一样。

将component包裹在keep-alive标签中，可以防止元素在页面上重复渲染，起到一个缓存的作用

component的语法：is后面的跟的是需要渲染的组件名，这里off表示的就是组件名
在这里插入图片描述

在vue实例中，我们将off的默认值定为my-a，即组件A

zhuhui2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.component动态组件

1.当我们在需要用到多个类似功能组件的时候（如导航栏），按照原始的写法会非常麻烦，先看一下原始的写法：这里实现的是点击哪一个页面，该页面相对应的内容也显示出来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>props传值&lt...
复制链接

扫一扫

专栏目录