首页 > 代码库 > 组件化应用构建
组件化应用构建
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
一个组件实例
<div id="app1"> <ol> <!-- 创建一个com1组件实例 --> <com1 v-for="item in list" v-bind:todo="item"></com1> </ol></div>
//注册一个名为com1的组件Vue.component("com1", { props: ["todo"], template: "<li>{{todo.text}}</li>"});new Vue({ el: "#app1", data: { list: [ {text: "大碗喝酒"}, {text: "大块吃肉"}, {text: "大刀向鬼子的头上砍去"} ] }});
运行结果
这个效果和我在循环语句中编写的实例效果是一样的。
也就是说，可以尝试用v-for指令来代替这个组件。
<div id="app1"> <ol> <li v-for="item in list">{{item.text}}</li> </ol></div>
new Vue({ el: "#app1", data: { list: [ {text: "大碗喝酒"}, {text: "大块吃肉"}, {text: "大刀向鬼子的头上砍去"} ] }});
通过两端代码的比较，尝试分析一下构建组件的过程：
- 注册一个组件com1，规定它的模板（template），规定了一个自定义属性（props）todo
- 组件构造成功后，就可以使用<com1>标签了，由于我的目的是要将list数组的3个数据渲染到DOM中，<com1>标签要使用v-for指令来遍历这个对象数组。OK，指令使用了，但<com1>标签中不能写{{}}来绑定数据啊，数据绑定已经在组件模板中写好了，再次使用报错，也不合逻辑。嗯，根据经验，这里是要传参吧。把v-for指令返回的数据传给com1组件的todo属性。有兴趣的可以找个纸笔，划一下结构，是正好等价的。
在一个大型应用中，有必要将整个应用程序划分为多个组件，以便开发管理。
组件化应用构建
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。