vue的动态组件

最新推荐文章于 2024-01-25 17:14:31 发布

许之知否

最新推荐文章于 2024-01-25 17:14:31 发布

阅读量201

点赞数

分类专栏： vue 文章标签： vue js html css

本文链接：https://blog.csdn.net/h083417172_/article/details/111302107

版权

vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

使用<component>元素动态挂载不同的组件，使用is特性来选择要挂载的组件
先在实例中注册三个组件，然后在实例的data选项中给currentview设置一个默认显示的组件，接着在methods中创建方法并使用v-on监听DOM事件，动态改变currentview对应的组件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>
        #app{
            border: 1px dotted #5c6b77;
            width: 600px;
            height: 400px;
        }
        .container-btns{
            margin-top: 2px;
            width: 600px;
            height: 42px;
            border-bottom: 1px #5c6b77 dotted;
        }
        .container-btn{
            width: 120px;
            height: 40px;
            line-height: 10px;
            border: 1px solid #f7f7f7;
        }
        .cpn-change{
            width: 600px;
            height: 356px;
        }
    </style>
    <div id="app">
        <div class="container">
            <div class="container-btns">
                <button class="container-btn" @click="handleClick('A')">切换到A</button>
                <button class="container-btn" @click="handleClick('B')">切换到B</button>
                <button class="container-btn" @click="handleClick('C')">切换到C</button>
            </div>
            <div class="cpn-change">
                <component :is="currentview"></component>
            </div>
        </div>
    </div>

    <template id="com-a">
        <div>
            <span>Hello! I am coma</span>
        </div>
    </template>

    <template id="com-b">
        <div>
            <span>Hello! I am comb</span>
        </div>
    </template>

    <template id="com-c">
        <div>
            <span>Hello! I am comc</span>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        let comA = {
          template: "#com-a"
        }
        let comB = {
          template: "#com-b"
        }
        let comC = {
          template: "#com-c"
        }
        let app = new Vue({
          el: "#app",
          data: {
            currentview: comA
          },
          components: {
            comA,
            comB,
            comC
          },
          methods: {
            handleClick(component) {
              this.currentview = 'com' + component
            }
          }
        })
    </script>
</body>
</html>

许之知否

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
vue的动态组件

使用<component>元素动态挂载不同的组件，使用is特性来选择要挂载的组件先在实例中注册三个组件，然后在实例的data选项中给currentview设置一个默认显示的组件，接着在methods中创建方法并使用v-on监听DOM事件，动态改变currentview对应的组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&gt.
复制链接

扫一扫