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 --> < ...
随机推荐
- [linux]解决DNS配置重启丢失
DNS配置重启丢失 每次重启后都修改DNS配置文件 /etc/resolv.conf从网上得知 /etc/resolv.conf中的DNS配置是从/etc/resolvconf/resolv.conf ...
- BNU7538——Clickomania——————【区间dp】
Clickomania Time Limit: 10000ms Memory Limit: 32768KB 64-bit integer IO format: %I64d Java clas ...
- solidity数据类型
1.Bool类型 取值:true/false 运算符:! && || == != 2.Integer整型 uint8-uint256 int8-int256 uint == uint ...
- Node.js之Buffer
JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存 ...
- glyphicons-halflings-regular.woff2 文件 404
搜索了下,果然是因为mine没有配置的原因. http://stackoverflow.com/questions/32300578/how-to-remove-error-about-glyphic ...
- Dozer 实现对象间属性复制
使用场景:两个领域之间对象转换. 比如:在系统分层解耦过程中, 对外facade接口,一般使用VO对象,而内core业务逻辑层或者数据层通常使用Entity实体. VO对象 package com.m ...
- centos7 版本防火墻操作和配置
1.关闭firewall:systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止fire ...
- SharePoint 2013 - Using Web Proxy
用于在SharePoint中调用其它网站服务时使用. 1. 需要引用sp.js 和 sp.runtime.js文件: 2. 需要用到SP.WebRequestInfo,SP.WebProxy,和SP. ...
- linux 中环境变量配置文件说明
1. 修改/etc/profile文件 特点:所有用户的shell都有权使用你配置好的环境变量 说明:如果你的电脑仅用作开发,建议使用此配置,因为所有用户的shell都有权使用你配置好的环境变量,所以 ...
- js实现base64编码与解码(原生js)
一直以来很多人使用到 JavaScript 进行 base64 编码解码时都是使用的 Base64.js,但事实上,浏览器很早就原生支持 base64 的编码与解码了 以前的方式 编码: <ja ...