Vue : 组件化应用构建

目录

Vue: 组件化应用构建

组件名

第一个Vue组件

使用 props属性传递参数

Props的命名

---

Vue: 组件化应用构建

组件系统是Vue的一个重要概念，允许我们使用小型，独立和通常可复用的组件构建大型应用。

几乎任意类型的应用界面都可以抽象为一个组件树。这些被画出来的框就是我们的应用界面，它由许多模块构成，这些模块都可以抽出来重新运用。

组件名

在这里说明一下，组件名的命名规范，最好按照 my-componen-name这样的格式来写自定义组件的名称,也就是字母全小写并且必须包含一个连字符。这会帮助你避免和当前以及未来的HTML元素相冲突。

官方文档参考：https://cn.vuejs.org/v2/guide/components-registration.html

官方给出的定义组件名的方式有两种，小写加短横线的命名方式和驼峰命名，但是在DOM中使用的时候，只有小写加短横线命名的方式是有效的，所以我推荐用短横线分割命名，避免以后排查错误的时候头疼。

• my-componet（短横线分割命名）【推荐使用】
• MyComponent（驼峰命名）

第一个Vue组件

作为Vue.js的初学者,我们不会以这样的方式构建组件。暂时这样做，是为了方便理解。以后会采用vue-cli创建.vue模板的方式开发。

构建一个组件有两个步骤

1. 注册组件
2. 实例化Vue

注册组件

• Vue.component()：注册组件
• claw： 组件的名字
• tempalte：组件的模板

我在这里定义了一个名为claw的组件，它在HTML里就是一个名为<claw></claw>的节点，就像我们的<div></div>一样。

模板里加入了<h1>claw的自定义组件</h1>这段话,意味着我使用<claw>节点时,<claw>里就是这段话。

    // 注册组件
    Vue.component('claw',{
        template: '<h1>claw的自定义组件</h1>'
    });

实例化组件

    //实例化Vue
    var vm = new Vue({
        el: '#vue',
    })

HTML

<div id="vue">
<claw></claw>
</div>

效果

使用 props属性传递参数

光是这样做其实是没有意义的，<h1>claw的自定义组件</h1>是写死在模板里的一句话，正常来说，应该存放一些数据在里面。

比如这样：

    // 注册组件
    Vue.component('claw',{
        template: '<h1>{{items}}</h1>'
    });
    //实例

让我们在Vue里面放一些数据：

    //实例化Vue
    var vm = new Vue({
        el: '#vue',
        data: {
            items: [
                'claw的自定义组件里的内容','claw的自定义组件里的内容2'
            ]
        }
    })

现在问题来了,数据是如何传递到模板里去的呢?也就是说定义在vue实例里的items的值,不会直接传递到组件模板里的变量里的

 Vue实例是一个父作用域，组件是子作用域，我们应该把父作用域的数据传递给子作用域 。

此时，我们就需要 props属性来传递值，声明props时要注意props的类型。我们的数据是一个数组类型，所以我们定义props的时将它声明为数组类型。

修改一下组件的定义，使它能接收一个prop：

 

    // 注册组件
    Vue.component('claw',{
        //这个prop名为propitems
        props:['propitems'],
        template: '<h1>{{propitems}}</h1>'
    });

接下来我们在组件里把items的值做一个遍历，然后将遍历出的数据存放在item里,和propitems绑定起来。

<div id="vue">
<claw v-for="item in items" v-bind:propitems="item"></claw>
</div>

结果

Props的命名

HTML中的atrribute名是大小写不敏感的，浏览器会将所有的大写字符解释为小写字符。

如果你使用了驼峰命名法来命名props，这就意味着在使用DOM中的模板需要用等价的短横线命名（kebab-case ）

这意味着什么呢？拿刚刚创建的组件例子来说

你在JS里命名了一个叫postTitle的props：

    // 在JavaScript中
    Vue.component('claw',{
        //props的命名方式是驼峰命名
        props:['propsItems'],
        template: '<h1>{{propsItems}}</h1>'
    });

 在HTML中却需要使用 post-title来表示它

<div id="vue">
    <!--在HTML里的propsItems变成了props-items-->
<claw v-for="item in items" v-bind:props-items="item"></claw>
</div>

需要注意Props的命名，否则会遇上很多坑，

props也不支持短横线命名！！！！

如果我们把propsItems直接改成为props-items，是会报错的。