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的知识可以点击链接学习

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue