vue引入全局组件和局部组件的区别以及全局注册公共函数

一，先看看全局组件的引用，就拿最常用的全局的暂无数据来举例，看看全局的是如何实现的。

Step1,首先在components创建一个公共的目录，NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面，index.js用来导出这个组件。

 

Step2: 然后就是在index.js中注册该组件

import NoDataS from './index.vue'
const noDataLists = {
    install: function(Vue) {
        // 注册并获取组件，然后在main.js中引用，在Vue.use()就可以了
        Vue.component('noDataLists', NoDataS)
    }
}
export default noDataLists

 

steps3:在main.js中引入并使用该组件

import noDataLists from '@/components/NoDatas/index'
Vue.use(noDataLists);

 

至此，就可以完美的使用了。

第二种 全局注册组件形式

先在main.js里这样写。  然后在App.vue里面 的template模板里 直接使用  加载使用即可

 

4.2局部组件引入方法 就是在App.vue里引入。

2,.全局注册公共的函数
公共函数common.js

const obj={
    fun1(){
    },
    fun2(){
    },
    fun3(){
    }
}
export default obj

 

main.js中引入方法

import common from '.icommon.js'
Vue.prototype.common=comm

 

其它组件中调用该方法的时候

this.common.fun1();

 

转载于:https://www.cnblogs.com/lsc-boke/p/11007879.html