1. 引言
通过前面的章节，我们已经学会了vue的Model内容数据双向绑定，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
- 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
- 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
- 《Vue系列教程（08）- 基本语法》
- 《Vue系列教程（09）- 事件绑定》
- 《Vue系列教程（10）- Model数据内容双向绑定》
本文主要讲的是Vue的新知识**“组件”**。
2. 组件
组件就是一组可以重复使用的模板，简单的说就是可重复使用的Vue示例。
2.1 注册组件（Vue.component）
先贴上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> <pan></pan> </div> <script type="text/javascript"> //先注册组件 Vue.component("pan", { template: '<li>Hello</li>' }); //再实例化Vue var vm = new Vue({ el: "#app", }); </script> </body> </html>
在上述的代码可以看到，使用了Vue.component来定义了模板（类似于FreeMarker）并以关键字pan为标签名，然后在代码里直接引入定义的pan标签名就可以显示定义模板里面的格式及内容了。运行效果如下：
2.2 传递参数（使用props属性）
当然我们希望的是，模板里面内容会动态改变，那么 “标签” 和 “模板” 的内容如何关联呢？先贴上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> <!--组件：传递给组件中的值：props--> <pan v-for="item in items" v-bind:panh="item"></pan> </div> <script type="text/javascript"> //定义组件 Vue.component("pan", { props: ['panh'], template: '<li>{{panh}}</li>' }); var vm = new Vue({ el: "#app", data: { items: ["java", "Linux", "前端"] } }); </script> </body> </html>
可以看到：
Vue.component里面使用了props属性，入参为panh- 然后把入参
panh定义到了引入标签的代码即：v-bind:panh="item"
整个流程下来：
- 首先把
data里面items的内容使用v-for先遍历 - 然后把每一个
item赋值给panh参数 - 最后把
panh入参的内容，赋值到了template模板的<li>{{panh}}</li>里面了
最后效果图如下：
3. 注意事项
在文末，需要提下注意的事项：
- 默认规则下props属性里的值不能为大写；
v-for="item in items"：遍历Vue实例中定义的名为items的数组。v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值
本文完！
