vue 开发中, 把有统一功能的部分提取出来, 作为一个独立的组件, 在需要使用的时候引入, 可以有效减少代码冗余. 难点在于如果封装, 使用, 如何传参, 派发事件等, 我会采取倒叙的方式进行说明.(本文总结于 Vue2 实战解密一书) 代码如下: 封装组件 BookList.vue
<template>
<div class=”book-list”>
<div class=”header”>
<div class=”heading”>{{heading}}</div>
<div class=”more”> 更多 …</div>
</div>
<div class=”book-items”>
<div class=”book” v-for=”book in books”>
<div class=”cover”>
<img :src=”book.imgUrl” />
</div>
<div>{{book.title}}</div>
<div>{{book.authors | join}}</div>
</div>
</div>
</div>
</template>
<script>
export default{
props:[‘heading’,’books’],
filters:{
join(args){
return args.join(‘,’);
}
}
}
</script>
要向组件输入数据就不能用 data 来作为数据容器了, 因为 data 是一个内部对象, 此时要换成 props
我们可以这样理解:
data 的作用域是仅仅适用于内部, 而对于外部是不可见的,props 是内部外部都可见, 是一个公共的组件成员变量.
Home.vue 组件代码如下:
<template>
<div class=”section”>
<book-list :books=”books1″ heading=” 书列表 1 ″></book-list>
</div>
<div class=”section”>
<book-list :books=”books2″ heading=” 书列表 2 ″></book-list>
</div>
</template>
<script>
import BookList from ‘./components/BookList.vue’
export default{
data(){
return{
books1:[],
books2:[],
}
},
components:{// 注册自定义组件
BookList
}
</script>