vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？

文章目录

vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
什么是组件？
为什么要使用组件？
如何使用组件呢？
- hello，组件
- 如何给组件里面传递参数呢？
- 组件的注册分为全局注册和局部注册
- 思考一下，如果是多个属性传入组件呢？

什么是组件？

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

为什么要使用组件？

你可以将组件进行任意次数的复用，减少代码量，提高代码的重用性，比如侧边栏，搜索框之类的。
组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。

如何使用组件呢？

vue.js官网讲解组件

下面我们一起来看看怎么初步使用它吧：

hello，组件

 <script type="text/javascript">// 先注册组件Vue.component('my-component-li', {template: '<li>Hello li</li>'});// 再实例化 Vuevar 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>'});// 再实例化 Vuevar 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-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title"></blog-post>

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。