组件开发遇到的问题(vue的问题)

简介: 组件开发遇到的问题(vue的问题)

组件的开发和引用

当我们将项目中公用的块,或者页面中多处样式一样,只是数据展示不同的地方抽取出一个个公用组件时,可以提高我们的开发效率,避免重复的工作,只需要在不同的页面引入公用的组件即可。创建一个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>
相关文章
|
3天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
23 1
|
2天前
|
JavaScript
vue知识点
vue知识点
9 2
|
3天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
3天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
3天前
|
JavaScript
|
3天前
|
编解码 JavaScript API
Vue在移动端的表现如何?
【5月更文挑战第30天】Vue在移动端的表现如何?
10 2
|
3天前
|
JavaScript 前端开发 API
Vue与其他框架的对比优势
【5月更文挑战第30天】Vue与其他框架的对比优势
11 1
|
4天前
|
JavaScript
Vue常用知识点总结
Vue常用知识点总结
11 0
|
5天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
25 7
|
5天前
|
JSON JavaScript 前端开发