Vue.js动态切换组件
在实际项目中,通常会有这样的需求: 在同一个界面区域内,要根据不同的情况展示不同的内容,比如像文件浏览器(windows资源管理器,finder)有列表显示文件夹内的内容和表格显示文件夹的内容,一般通过点击工具栏上的按钮进入切换. 那么像这种需求应该如何实现呢?用过vue.js都知道两个不同的界面显示和相关操作通常会抽象出不同的component来实现,如列表的实现FileView.vue..
·
在实际项目中,通常会有这样的需求:
在同一个界面区域内,要根据不同的情况展示不同的内容,比如像文件浏览器(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在进行页面有链接跳转时使用,场景又不太一样.
更多推荐
已为社区贡献3条内容
所有评论(0)