一、全局组件注册有两种方法:
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文件中使用,但是不太安全,而且会增大文件体积
局部组件:使用之前需要注册