在vue的项目开发过程中,基本都是基于组件化开发项目,总结下使用组件的几个点:

一、@符号的使用

在vue项目中 @ 符号代表的是根目录,即 src 目录。

二、组件的放置位置

在项目中,公用的组件放置在 components 目录下,项目组件新建 views 目录来存放:

三、组件的引和使用方法

1、第一种引入和使用方法:

import navs from '@/views/nav/index'

使用组件:

components:{
'v-nav':navs
}

模板中使用组件:

<v-nav></v-nav>

2、第二种引入和使用方法

import navs from '@/views/nav/index'
import indexList from './index-list'

使用组件:

components: { navs,indexList },

模板中使用:

<index-list></index-list>
<navs></navs>

3、第三种使用方法

组件目录:

引入方式:

import BackToTop from '@/components/BackToTop'

使用组件:

components: { BackToTop },

使用组件:

<el-tooltip placement="top" content="tooltip">
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="" :back-position="" transition-name="fade" />
</el-tooltip>

其实没什么,只是要注意下组件大小写命名的写法。

vue---组件引入及使用的几种方式的更多相关文章

  1. vue安装及创建项目的几种方式

    原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...

  2. 基于 Webpack 引入公共库的几种方式

    以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...

  3. vue动态绑定class的最常用几种方式

    vue动态绑定class的最常用几种方式:  第一种:(最简单的绑定) 1.绑定单个class html部分: <div :class="{'active':isActive}&quo ...

  4. Vue组件间通信方式到底有几种

    1. 前言 Vue的一个核心思想就是组件化.所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS.JavaScript.模板.图片等资源放在一起开发和维护.组件是资源独 ...

  5. Vue中组件间传值常用的几种方式

    版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...

  6. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  7. Java-Maven项目引入UEditor图片上传组件jar包类库的5种方式

    最近,硬是和百度的UEditor组件杠上了.自己的个人官网项目,很容易就搞定了,公司的项目,尼玛,各种问题.项目多了,环境复杂了,解决问题的方法也得不断调整. 项目用Maven管理jar包,用到了UE ...

  8. vue项目中导出PDF的两种方式

    参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...

  9. Eclipse引入jar包的三种方式

    引用自 http://chenxu.wo.blog.163.com/blog/static/50239687201162310620634/ 使用Eclipse开发应用程序,少不了使用第三方jar包, ...

  10. mappers标签引入映射器的四种方式

    第一种方式:mapper标签,通过resource属性引入classpath路径的相对资源 <!-- Using classpath relative resources --> < ...

随机推荐

  1. 常用css搜集

    div居中显示 position: fixed; top: 130px; left:0px;right:0px;margin-left:auto;margin-right:auto;

  2. TOJ 1721 Partial Sums

    Description Given a series of n numbers a1, a2, ..., an, the partial sum of the numbers is defined a ...

  3. 使用jxl读取excel内容,并转换成Json,用于Datagrid

    一.上传excel文件,得到InputStream,由InputStream得到Jxl中的Workbook,取出内容,存到二维数组中. 1.使用 Jquery Uploadify 插件(http:// ...

  4. 进入保护模式(一)——《x86汇编语言:从实模式到保护模式》读书笔记12

    之前已经做了一些理论上的铺垫,这次我们就可以看代码了. 一.代码清单 ;代码清单11-1 ;文件名:c11_mbr.asm ;文件说明:硬盘主引导扇区代码 ;创建日期:2011-5-16 19:54 ...

  5. Programmer Competency Matrix--ref--http://sijinjoseph.com/programmer-competency-matrix/

    Note that the knowledge for each level is cumulative; being atlevel n implies that you also know eve ...

  6. [转] CentOS下添加用户并且让用户获得root权限

    http://www.centoscn.com/CentOS/config/2014/0810/3471.html 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser ...

  7. e.target和e.event和event.srcElement

    e.target 是目标对象,e.event是目标所发生的事件,event.srcElement捕获当前事件作用的对象 1. $(function(){ $("li:has(ul)" ...

  8. 关于“System.Data.ProviderIncompatibleException”类型的异常

    作为刚学习MVC的菜鸟,因为平常的不努力学习.看书,所以只能参考官方的教程学习操作新手入门 一步一步认真的做,前天晚上出现了一个关于数据库连接字符串错误的问题,自己查了很多资料, 问了许多大神,他们的 ...

  9. android device ID获取

    Android  Device ID是Android用户在Google认证过手机的设备唯一标识,当然国内很多Android手机没有经过Google认证,所以一般没有Google官方Android de ...

  10. 正则表达式的实践demo

    正则表达式十分强大,几乎在所有框架中处处可以看到,下载框架源码仔细阅读肯定可以发现.在项目应用中也经常需要正则的帮助,举个栗子,我们常需要用到的表单验证输入....其实还有很多,不一一道出,在这里我搜 ...