文章目录
- 1. 引言
- 2. 组件
- 2.1 注册组件（Vue.component）
- 2.2 传递参数（使用props属性）
- 3. 注意事项
1. 引言
通过前面的章节，我们已经学会了vue的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项的值
本文完！
