Vue.js动态切换组件

在实际项目中,通常会有这样的需求:
  在同一个界面区域内,要根据不同的情况展示不同的内容,比如像文件浏览器(windows资源管理器,finder)有列表显示文件夹内的内容和表格显示文件夹的内容,一般通过点击工具栏上的按钮进入切换.
  那么像这种需求应该如何实现呢?用过vue.js都知道两个不同的界面显示和相关操作通常会抽象出不同的component来实现,如列表的实现FileView.vue,表格的实现GridFileView.vue,但是要怎么做到根据条件做动态的切换呢,这个其实在vue.js里实现起来很简单,只要使用<component is="xxx" />这样的语法,xxx是组件名,下面是示例:

<div class="conntainer">
    <div class="right">
        <component :is="showFileType" v-on:onTableRowDbClick="onTableRowDbClick" :files="tableData"/>
    </div>
</div>
<script>
    import FileView from '@/components/widgets/FileView.vue'
    import GridFileView from '@/components/widgets/GridFileView.vue'

    export default {
        name: 'FileManager',
        components: { PathNavigator, FileView, GridFileView },
        props: {
            msg: String
        },
        data() {
            return {
                showFileType: "FileView"
            }
        },
        methods: {
            onShowListFile() {
                //切换到列表
                this.$set(this, 'showFileType', 'FileView');
            },

            onShowGridFile() {
                //切换到表格
                this.$set(this, 'showFileType', 'GridFileView');
            }
        }
    }
<script>

上面的示例并不是完整代码,完整代码在github:Enlarge-Web,原理很简单,就是通过改变showFileType变量让切换不同的组件进行切换界面.
和is语法来切换组件类似的方法还有slot和router-view,slot是需要在父组件中定义slot在外部使用时使用标签包含起来,不能在同一个vue中进行操作,不方便.而router-view在进行页面有链接跳转时使用,场景又不太一样.