目录
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模板的方式开发。
构建一个组件有两个步骤
- 注册组件
- 实例化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,是会报错的。