vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
文章目录
什么是组件？
组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
为什么要使用组件？
你可以将组件进行任意次数的复用，减少代码量，提高代码的重用性，比如侧边栏，搜索框之类的。
组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。
如何使用组件呢？
下面我们一起来看看怎么初步使用它吧：
hello，组件
<script type="text/javascript">
// 先注册组件
Vue.component('my-component-li', {
template: '<li>Hello li</li>'
});
// 再实例化 Vue
var vm = new Vue({
el: '#vue'
});
</script>
<div id="vue">
<ul>
<!--使用自定义的组件-->
<my-component-li></my-component-li>
</ul>
</div>
- Vue.component()：注册组件
- my-component-li：自定义组件的名字
- template：组件的模板
如何给组件里面传递参数呢？
向上面那种一点用都没有223，因为没有参数传进去，意义性不大，如果需要传递参数进去，则需要props属性了
ps：props里面的属性值不能大写
<script type="text/javascript">
// 先注册组件
Vue.component('my-component-li', {
props: ['item'],
template: '<li>Hello {{item}}</li>'
});
// 再实例化 Vue
var vm = new Vue({
el: '#vue',
data: {
items: ["张三", "李四", "王五"]
}
});
</script>
<div id="vue">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
说明：
- v-for=“item in items”：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件
- v-bind:item=“item”：将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上；= 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值
- 可以这么理解，数据的流向是：先从data种items流向了v-for中的item，然后再由item流向了props中的item。
组件的注册分为全局注册和局部注册
全局注册:
Vue.component('my-component-name', {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。
思考一下，如果是多个属性传入组件呢？
比如：
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
这个时候怎么动态绑定呢？
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。
到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。
