查看“Vue从入门到实战:动态组件”的源代码
←
Vue从入门到实战:动态组件
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
在页面应用程序中,经常会遇到多标签页面, 在Vue.js中,可以通过动态组件来实现 组件的动态切换是通过在<component>元素上使用is属性来实现 [[文件:vue21021101.png|600px]] 三个标签是三个按钮,下面的内容部分由组件来实现, 三个按钮对应三个组件,按钮响应click事件,点击不同按钮时切换不同的组件, 组件切换通过<component>元素和其上的<a>属性来实现。 ==定义组件== <nowiki> Vue.component('tab-introduce', { data(){ return { content: 'Vue.js无难事' } }, template: '<div><input v-model="content"></div>' }) Vue.component('tab-comment', { template: '<div>这是一本好书</div>' }) Vue.component('tab-qa', { template: '<div>有人看过吗?怎么样?</div>' }) </nowiki> ==定义根实例== 在根实例中定义了两个数据属性和一个计算属性, 主要是为了便于使用v-for指令循环渲染button按钮,以及动态切换组件。 <nowiki> var vm = new Vue({ el: '#app', data: { currentTab: 'introduce', tabs: [ {title: 'introduce', displayName: '图书介绍'}, {title: 'comment', displayName: '图书评价'}, {title: 'qa', displayName: '图书问答'} ] }, computed: { currentTabComponent: function () { return 'tab-' + this.currentTab } } }) </nowiki> ==在DOM中渲染== <nowiki> <div id="app"> <button v-for="tab in tabs" :key="tab.title" :class="['tab-button', { active: currentTab === tab.title }]" @click="currentTab = tab.title"> {{ tab.displayName }} </button> <!-- <keep-alive> --> <component v-bind:is="currentTabComponent" class="tab"> </component> <!-- </keep-alive> --> </div></nowiki> 当点击某个标签按钮时,更改数据属性currentTab的值,这将导致计算属性currentTabComponent的值更新, <component>元素的is属性使用v-bind指令绑定到一个已注册组件的名字上。 ==用keep-alive改进== 如果希望组件在切换的时候,可以保持组件的状态,可以用一个<keep-alive>元素将动态组件包裹起来。 <nowiki> <keep-alive> <component v-bind:is="currentTabComponent" class="tab"> </component> </keep-alive></nowiki> ==完整代码== <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态组件</title> <style> div { width: 400px; } .tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: solid 1px #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px; } .tab-button:hover { background: #e0e0e0; } .tab-button.active { background: #cdcdcd; } .tab { border: solid 1px #ccc; padding: 10px; } </style> </head> <body> <div id="app"> <button v-for="tab in tabs" :key="tab.title" :class="['tab-button', { active: currentTab === tab.title }]" @click="currentTab = tab.title"> {{ tab.displayName }} </button> <keep-alive> <component v-bind:is="currentTabComponent" class="tab"> </component> </keep-alive> </div> <script src="vue.js"></script> <script> Vue.component('tab-introduce', { data(){ return { content: 'Vue.js无难事' } }, template: '<div><input v-model="content"></div>' }) Vue.component('tab-comment', { template: '<div>这是一本好书</div>' }) Vue.component('tab-qa', { template: '<div>有人看过吗?怎么样?</div>' }) var vm = new Vue({ el: '#app', data: { currentTab: 'introduce', tabs: [ {title: 'introduce', displayName: '图书介绍'}, {title: 'comment', displayName: '图书评价'}, {title: 'qa', displayName: '图书问答'} ] }, computed: { currentTabComponent: function () { return 'tab-' + this.currentTab } } }) </script> </body> </html></nowiki>
返回至
Vue从入门到实战:动态组件
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息