vue全局元件注冊、局部元件注冊、全局方法注冊

一、全局元件注冊有兩種方法：

1、在main.js檔案中引入元件：

import UserData from './components/UserData.vue' 
vue.component('UserData',UserData)      

就可以直接在vue檔案中使用

<user-data></user-data>      

2、建立一個userdata目錄 下面有一個index.vue和index.js檔案

index.vue檔案 是正常的vue檔案

index.js檔案注冊該元件：

import index from './index.vue'
const indexLists = {
    install: function(Vue) {
        // 注冊并擷取元件，然後在main.js中引用，在Vue.use()就可以了
        Vue.component('indexLists', index)
    }
}
export default indexLists      

在main.js使用并注冊：

import userdata from '@/components/index.js'
Vue.use(userdata);      

二、局部元件注冊：

<template>
<div>
//元件使用
<user-data></user-data>
</div>
</template>
<script>
import UserData from './components/UserData.vue' // 元件引入
export default {
name:'test',
components:{
UserData //元件注冊
}
}
</script>      

三：全局方法注冊：

在目錄下面建立一哥common.js檔案：

const obj={
    fun(){
     console.log('hello word')
    }
}
export default obj

import comm form './common.js'

Vue.protopyte.$common = comm

this.$common.fun1() // hello word      

全局元件：注冊之後可以直接在vue檔案中使用，但是不太安全，而且會增大檔案體積

局部元件：使用之前需要注冊