Vue系列教程（11）- 组件详解（Vue.component、props）

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>


    
    Title
    





    




    //先注册组件
    Vue.component("pan", {

        template: '
Hello
'

    });
    //再实例化Vue
    var vm = new Vue({
        el: "#app",
    });

在上述的代码可以看到，使用了Vue.component来定义了模板（类似于FreeMarker）并以关键字pan为标签名，然后在代码里直接引入定义的pan标签名就可以显示定义模板里面的格式及内容了。运行效果如下：

2.2 传递参数（使用props属性）

当然我们希望的是，模板里面内容会动态改变，那么 “标签” 和 “模板” 的内容如何关联呢？先贴上代码：

DOCTYPE html>


    
    Title
    




    
    




    //定义组件
    Vue.component("pan", {
        props: ['panh'],
        template: '
{{panh}}
'

    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java", "Linux", "前端"]
        }
    });

可以看到：

• Vue.component里面使用了props属性，入参为panh
• 然后把入参panh定义到了引入标签的代码即：v-bind:panh="item"

整个流程下来：

• 首先把data里面items的内容使用v-for先遍历
• 然后把每一个item赋值给panh参数
• 最后把panh入参的内容，赋值到了template模板的
• {{panh}}
里面了

最后效果图如下：

3. 注意事项

在文末，需要提下注意的事项：

• 默认规则下props属性里的值不能为大写；
• v-for="item in items"：遍历Vue实例中定义的名为items的数组。
• v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值

本文完！