组件的开发和引用
当我们将项目中公用的块,或者页面中多处样式一样,只是数据展示不同的地方抽取出一个个公用组件时,可以提高我们的开发效率,避免重复的工作,只需要在不同的页面引入公用的组件即可。创建一个viewMore.vue文件,定义一个组件块。
<template> <div class="xx">组件</div> </template> <script> export default { name: 'viewMore', components: {}, data() { return { } } } </script> <style scoped> 可以定义组件都有的样式 </style>
这样就可以在其它组件引用了,引用方式很简单:例如在index.vue中引进viewMore.vue组件,假设两个文件处在同级目录中。
index.vue中的代码:
<template> <more></more> </template> <script> import viewMore from 'viewMore.vue' export default { name: 'index', components: { more: viewMore }, data() { return { } } } </script>