vue---组件引入及使用的几种方式
在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---组件引入及使用的几种方式的更多相关文章
- vue安装及创建项目的几种方式
原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...
- 基于 Webpack 引入公共库的几种方式
以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...
- vue动态绑定class的最常用几种方式
vue动态绑定class的最常用几种方式: 第一种:(最简单的绑定) 1.绑定单个class html部分: <div :class="{'active':isActive}&quo ...
- Vue组件间通信方式到底有几种
1. 前言 Vue的一个核心思想就是组件化.所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS.JavaScript.模板.图片等资源放在一起开发和维护.组件是资源独 ...
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- Java-Maven项目引入UEditor图片上传组件jar包类库的5种方式
最近,硬是和百度的UEditor组件杠上了.自己的个人官网项目,很容易就搞定了,公司的项目,尼玛,各种问题.项目多了,环境复杂了,解决问题的方法也得不断调整. 项目用Maven管理jar包,用到了UE ...
- vue项目中导出PDF的两种方式
参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...
- Eclipse引入jar包的三种方式
引用自 http://chenxu.wo.blog.163.com/blog/static/50239687201162310620634/ 使用Eclipse开发应用程序,少不了使用第三方jar包, ...
- mappers标签引入映射器的四种方式
第一种方式:mapper标签,通过resource属性引入classpath路径的相对资源 <!-- Using classpath relative resources --> < ...
随机推荐
- 常用css搜集
div居中显示 position: fixed; top: 130px; left:0px;right:0px;margin-left:auto;margin-right:auto;
- TOJ 1721 Partial Sums
Description Given a series of n numbers a1, a2, ..., an, the partial sum of the numbers is defined a ...
- 使用jxl读取excel内容,并转换成Json,用于Datagrid
一.上传excel文件,得到InputStream,由InputStream得到Jxl中的Workbook,取出内容,存到二维数组中. 1.使用 Jquery Uploadify 插件(http:// ...
- 进入保护模式(一)——《x86汇编语言:从实模式到保护模式》读书笔记12
之前已经做了一些理论上的铺垫,这次我们就可以看代码了. 一.代码清单 ;代码清单11-1 ;文件名:c11_mbr.asm ;文件说明:硬盘主引导扇区代码 ;创建日期:2011-5-16 19:54 ...
- 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 ...
- [转] CentOS下添加用户并且让用户获得root权限
http://www.centoscn.com/CentOS/config/2014/0810/3471.html 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser ...
- e.target和e.event和event.srcElement
e.target 是目标对象,e.event是目标所发生的事件,event.srcElement捕获当前事件作用的对象 1. $(function(){ $("li:has(ul)" ...
- 关于“System.Data.ProviderIncompatibleException”类型的异常
作为刚学习MVC的菜鸟,因为平常的不努力学习.看书,所以只能参考官方的教程学习操作新手入门 一步一步认真的做,前天晚上出现了一个关于数据库连接字符串错误的问题,自己查了很多资料, 问了许多大神,他们的 ...
- android device ID获取
Android Device ID是Android用户在Google认证过手机的设备唯一标识,当然国内很多Android手机没有经过Google认证,所以一般没有Google官方Android de ...
- 正则表达式的实践demo
正则表达式十分强大,几乎在所有框架中处处可以看到,下载框架源码仔细阅读肯定可以发现.在项目应用中也经常需要正则的帮助,举个栗子,我们常需要用到的表单验证输入....其实还有很多,不一一道出,在这里我搜 ...