组件化应用构建
- 组件系统是 Vue 的另一个重要概念
- 意类型的应用界面都可以抽象为一个组件树
- 也就是说项目都是一个个的组件构成的
- 我们使用小型、独立和通常可复用的组件构建大型应用。
- 这是一种开发的理念,组件化开发,
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
-
要重点理解一下,上面的组件化开发
-
如何进行组件的注册? Vue.component
todo-item就是组件的名字
template: '<li>这是个待办项</li>' 为什么要是li?
- 如何进行数据传递?
我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义,使之能够接受一个 prop
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop",类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
- 如何把数据进行展示出来?
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
- 子单元通过 prop 接口与父单元进行了良好的解耦
- 在一个大型应用中,有必要将整个应用程序划分为组件,以使开发更易管理。
- 我认为这个组件后面要重点理解学习,现在还是不理解,