zoukankan      html  css  js  c++  java
  • vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui、mintui、iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html

    其中最引人注意的一点就是vue.use()的使用,那么我们怎么样才能自己封装一个也使用vue.use()的组件呢,看下面:

    一、vue自定义组件

    以loading组件为例:

    1,首先新建loading文件夹,并在文件夹内新建loading.vue和index.js文件,如下图

     2,在loading.vue文件中写自己的组件,与普通的组件写法相同,如下图:

     3,编辑index.js,核心为install属性,如下图:

     4,main.js中引入相应的组件并用vue.use()使用组件,如下图:

     此时可以直接在项目中的任何地方直接用

    <Loading/>或者
    <Loading></Loading>
    来使用我们封装的组件了

    二、全局组件:

    全局组件的使用十分简单,

    首先,你需要一个组件,新建一个

    globalcomponent.vue文件,如下图:

     然后在main.js中引入相应的文件并用vue.compoment()注册,如下图:

     然后就可以直接全局使用了

    <globalcomponent></globalcomponent>
    或<globalcomponent/>
    就是这么简单,实质上与vue自定义组件是一样的,只不过自定义组件多了一对函数,即:vue.use()和install
     
    三、局部组件:
    局部组件的使用非常简单,但是它不能再注册的组件外部使用,否则会报错
    同样,首先,你需要一个组件,新建一个part-1.vue文件,如下图:

     然后,你需要在想使用该组件的地方引入并注册该组件,然后使用,如下图:

    以上为全部内容。

  • 相关阅读:
    App如何选择移动广告平台,开发者2
    mouseover与mouseenter与mousemove差额mouseout与mouseleave差额
    JFinal 的源代码超具体的分析DB+ActiveRecord
    Vim经常使用技巧总结1
    2015第4周四网摘
    Java任务调度
    2015第4周二网摘
    2015第4周一
    2015第三周日
    转SpringSided代码规范遵循
  • 原文地址:https://www.cnblogs.com/wangtong111/p/11526342.html
Copyright © 2011-2022 走看看