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文件中使用，但是不太安全，而且会增大文件体积

局部组件：使用之前需要注册

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6808