zoukankan      html  css  js  c++  java
  • 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="300" :back-position="50" transition-name="fade" />
    </el-tooltip>

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

  • 相关阅读:
    父进程pid和子进程pid的大小关系
    static 和extern关键字
    linux源码下载
    tar命令
    USB开发——内核USB驱动+libusb开发方法
    microchip PIC芯片使用方法
    android下4G上网卡
    Modem常用概念
    4G上网卡NIDS拨号之Rmnet驱动
    Uboot源码解析
  • 原文地址:https://www.cnblogs.com/e0yu/p/10795176.html
Copyright © 2011-2022 走看看