组件
什么是组件
组件是可复用的 Vue
实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、 Thymeleaf 的 th:fragment
等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式 来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组 件。
第一个 Vue 组件
注意:在实际开发中,我们并不会用以下方式开发组件,以下方法只是为了让大家理解什么是组件。
使用 Vue.component() 方法注册组件:
06-vue-component.html
<body>
<divid="app">
<ul>
<!-- 有点类似自定义标签 -->
<my-component-li></my-component-li>
</ul>
</div>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
// 先注册组件
Vue.component('my-component-li', {
template: '<li>Hello li</li>'
});
// 再实例化 Vue
varvm=newVue({
el: '#app'
});
</script>
</body>
说明:
- Vue.component():注册组件
- my-component-li:自定义组件的名字
- template:组件的模板(组件中的内容)
使用 props 属性传递参数
像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用 props 属性 了!
注意:默认规则下 props 属性里的值不能为大写:
06-vue-component-2.html
<body>
<divid="app">
<ul>
<my-component-liv-for="item in items"v-bind:i="item">
<!--将循环变量item绑定到组件中的变量i-->
</my-component-li>
</ul>
</div>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
// 先注册组件('组件名',{对象})
Vue.component('my-component-li', {
props: ['i'], // 为组件声明一个属性i
template: '<li>Hello {{i}}</li>'
// 因为vm和Vue都是对象,对象之间的属性无法互相传递
// 所以这里用了绑定的特殊方法,template中才能拿到data中的值
});
// 再实例化 Vue
varvm=newVue({
el: '#app',
data: {
items: ["张三", "李四", "王五"]
}
});
</script>
</body>
说明:
v-for="item in items"
:遍历Vue
实例中定义的名为items
的数组,并创建同等数 量的组件;v-bind:item="item"
:将遍历的item
项绑定到组件中props
定义的名为item
属 性上;- = 号左边的 item 为 props 定义的属性名,右边的为
item in items
中遍历的 item 项的值;