组件化

本节目标：理解“组件化”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 ==组件系统是== ==Vue== ==的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：==

==在== ==Vue== ==里，一个组件本质上是一个拥有预定义选项的一个== ==Vue== ==实例。在== ==Vue== ==中注册组件很简单：== ==// 定义名为 todo-item 的新组件========Vue.component(===='todo-item'====, {====== ==template:== =='<li>这是个待办项</li>'========})====== ==var== ==app === ==new== ==Vue(...)== ==现在你可以用它构建另一个组件模板：== ==<ol>====== ======== ==<todo-item></todo-item>========</ol>== ==但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个== ==prop====：== ==Vue.component(===='todo-item'====, {====== ==// todo-item 组件现在接受一个====== ==// "prop"，类似于一个自定义 attribute。====== ==// 这个 prop 名为 todo。====== ==props: [===='todo'====],====== ==template:== =='<li>{{ todo.text }}</li>'========})== ==现在，我们可以使用== ==v-bind== ==指令将待办项传到循环输出的每个组件中：== ==<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:== =='随便其它什么人吃的东西'== ==}====== ==]====== ==}========})==

蔬菜
奶酪
随便其它什么人吃的东西

==尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过== ==prop== ==接口与父单元进行了良好的解耦。我们现在可以进一步改进== ==<todo-item>== ==组件，提供更为复杂的模板和逻辑，而不会影响到父单元。== ==在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。在====后续教程====中我们将详述组件，不过这里有一个== ==(====假想的====)== ==例子，以展示使用了组件的应用模板是什么样的：== ==<div id====="app"====>====== ==<app-nav></app-nav>====== ==<app-view>====== ==<app-sidebar></app-sidebar>====== ==<app-content></app-content>====== ==</app-view>========</div>== > 来自 <https://cn.vuejs.org/v2/guide/>

组件化 ​

组件化