Vue中组件的切换

小鱼儿 2022-04-22 10:52 318阅读 0赞

### 文章目录 ###

*  示例
 *   *  源码
     *  结果
     *  分析

此处的组件切换使用的是`Vue`中的`component`组件中的`is`属性来实现的。该`is`属性实现的功能是根据组件名称的不同来切换显示不同的组件控件。

# 示例 #

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>
    <body>
        <template id="demo1">
            <h2>组件1</h2>
        </template>
        <template id="demo2">
            <h2>组件2</h2>
        </template>
        <div id="app">
            <a href="javascript:void(0)" @click="componentName = 'demo1'">组件1</a> |
            <a href="javascript:void(0)" @click="componentName = 'demo2'">组件2</a>
            <component :is="componentName"></component>
        </div>
    <script src="../../../js/vue/vue/1.0/vue.js"></script>
    <script type="application/javascript">
        //组件1
        Vue.component('demo1',{
            template:'#demo1'
        });
        //组件2
        Vue.component('demo2',{
            template:'#demo2'
        });
        //创建Vue对象
        new Vue({
            el:'#app'
            ,data:{
                componentName:''
            }
        });
    </script>
    </body>
    </html>

## 结果 ##

![在这里插入图片描述][20181104151716666.png]

## 分析 ##

上面该代码实现的功能是，当我点击`组件1`链接时，其会切换`组件1`展示内容，当我点击`组件2`时，其会切换`组件2`展示内容，以此来实现点击不同的链接，跳转展示不同的组件内容。

在上面的代码中，由于`a`标签自己默认有一个点击响应事件`href`此时我们在使用时为了不触发其自身默认的点击响应事件，因而我们会将该事件的返回类型置空，即标记成`javascript:void(0)`

在`a`标签中，由于在`href`和`@click`属性都是表示此处可填写`js`代码块，因而在这里我们不仅仅可以填写函数的调用方法，我们还可以直接在此处填写`js`，比如填写`componentName = 'demo2'`，其等价于`this.componentName = 'demo2';`因而我们在此处使用后一种方式也是正确的。

在`component`中的`:is`其实全称是`v-bind:is`，其是一个条件判断，返回的是一个布尔类型的数据。其就是用来判断`componentName`所指明的控件是否为真，如果是，则进行相应的展示。

通过上述的几个功能，我们以此来实现Vue中控件的切换展示操作。

[20181104151716666.png]: /images/20220422/440f7bd22beb4681a6850f1ceb8d966b.png