资海集团网站建设企业网站建设服务
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件 - 动态组件
目录
动态组件
选项卡页面示例
更简单写法
增加输入框
弥补措施
总结
动态组件
选项卡页面示例
功能：选项卡功能，设置导航点击哪个显示相应页面。
设置三个全局组件，并在页面中调用；在组件的下方设置触发导航。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>footer ul {margin-top:200px;float:left;background-color: #ccc;list-style: none;}footer ul li {width:100px;height: 20px;float:left;line-height: 20px;text-align: center;}</style><script src="../lib/vue.js"></script>
</head>
<body>
<div id="box"><home v-show=" which === 'home'"></home><list v-show=" which === 'list'"></list><shopcar v-show=" which === 'shopcar'"></shopcar><footer><ul><li @click=" which='home'">首页</li><li @click=" which='list'">列表</li><li @click=" which='shopcar'">购物车</li></ul></footer>
</div>
<script>Vue.component("home", {template:`<div>home</div>`})Vue.component("list", {template:`<div>list</div>`})Vue.component("shopcar", {template:`<div>shopcar</div>`})let vm = new Vue({el: "#box",data: {which:'home'}})
</script>
</body>
</html>效果如下：
更简单写法
使用component组件优化原有写法。
Component是组件控件，is是固定属性；动态绑定状态即可。
示例如下：
<div id="box"><!--<home v-show=" which === 'home'"></home><list v-show=" which === 'list'"></list><shopcar v-show=" which === 'shopcar'"></shopcar>--><component :is="which"></component><footer><ul><li @click=" which='home'">首页</li><li @click=" which='list'">列表</li><li @click=" which='shopcar'">购物车</li></ul></footer>
</div>动态组件缺点是适配性不好，无法复用。
增加输入框
每个组件都有一个输入框、搜索框，当切换组件后，输入框中的内容无法复用。
在home组件中增加输入框，切换组件后发现原有输入内容消失了。
示例如下：
Vue.component("home", {template:`<div>home<input type="text"></div>`
})弥补措施
保持活着，首先把数据加载到内存中，等组件创建后再临时从内存中读出来，显示出来。
示例如下：
<keep-alive><component :is="which"></component>
</keep-alive>总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件 - 动态组件