Vue之component 标签

最新推荐文章于 2024-04-02 17:04:05 发布

梁萌

最新推荐文章于 2024-04-02 17:04:05 发布

阅读量1.1w

点赞数 6

分类专栏： vue 文章标签： vue component标签

vue 专栏收录该内容

45 篇文章 3 订阅

订阅专栏

component 标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

实例：

1.我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.

2.我们在构造器的components选项里加入这三个组件。

3.我们在html里插入component标签，并绑定key数据，根据key的值不同，调用不同的组件。

这就是我们的组件标签的基本用法。我们提高以下，给页面加个按钮，每点以下更换一个组件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/vue.js"></script>
</head>

<body>

    <div id="app">
    <component :is="key"></component>
    </div>

    <script>
        var componentA = {
            template: `<div style="color:red">我是A组件</div>`
        }

        var componentB = {
            template: `<div style="color:blank">我是B组件</div>`
        }

        var componentC = {
            template: `<div style="color:pink">我是C组件</div>`
        }

        var app = new Vue({
            el: '#app',
            components: {
                "comA": componentA,
                "comB": componentB,
                "comC": componentC
            },
            data:{
                key:'comB'
            }
        })

    </script>
</body>

</html>

vue中 'is' 关键字用来动态切换组件

想学习更多关于vue的知识可以点击链接学习

梁萌

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue之component 标签

component 标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。实例：1.我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.2.我们在构造器的components选项里加入这三个组件。3.我们在html里插入component标签，并绑定key数据，根据key的值不...
复制链接

扫一扫