zoukankan      html  css  js  c++  java
  • Vue.use() 和 Vue.component() 的区别

    官方定义:

    Vue.use( plugin )

    • 参数:

      • {Object | Function} plugin
    • 用法:

      安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

      该方法需要在调用 new Vue() 之前被调用。

      当 install 方法被同一个插件多次调用,插件将只会被安装一次。

    • 参考:插件

    Vue.component( id, [definition] )

    • 参数:

      • {string} id
      • {Function | Object} [definition]
    • 用法:

      注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

      // 注册组件,传入一个扩展过的构造器
      Vue.component('my-component', Vue.extend({ /* ... */ }))
      
      // 注册组件,传入一个选项对象 (自动调用 Vue.extend)
      Vue.component('my-component', { /* ... */ })
      
      // 获取注册的组件 (始终返回构造器)
      var MyComponent = Vue.component('my-component')
    • 参考:组件

    2、当我们想好多地方要是用到同一个组件,又不想每次都在局部注册时,可以在main.js 中全局注册

    main.js

    import common from '@/components/common.vue'
    
    Vue.component(common);

    3、Vue.use() 可以一次性注册多个组件或添加全局方法或属性

    Vue.use(plugin)的初始化方法{install:function(){}}里面可以一次性注册多个组件。
    Vue.component只能一个一个注册。
    install可以做更多的事情
    MyPlugin.install=function(Vue,options){
    //1.添加全局方法或属性
    Vue.myGlobalMethod=function(){
    //逻辑...
    }
    //2.添加全局资源
    Vue.directive('my-directive',{
    bind(el,binding,vnode,oldVnode){
    //逻辑...
    }
    ...
    })
    //3.注入组件选项
    Vue.mixin({
    created:function(){
    //逻辑...
    }
    ...
    })
    //4.添加实例方法
    Vue.prototype.$myMethod=function(methodOptions){
    //逻辑...
    }
    }
  • 相关阅读:
    HTML head 头标签
    p标签text-align:justify以及CSS文字两端对齐
    css雪碧图制作
    ps去掉图片上的文字
    Qt Quick之TableView的使用
    Qt Quick之Canvas
    Qt Quick中的信号与槽
    QT之在QML中使用C++类和对象
    rhel7+apache+c cgi+动态域名实现web访问
    (转载)JDOM/XPATH编程指南
  • 原文地址:https://www.cnblogs.com/liangziaha/p/15354054.html
Copyright © 2011-2022 走看看