全局组件
第一种定义方法:
A、创建自己的组件:Loading.vue
B、在main.js文件中引入组件并注册
import Vue from 'vue'
import App from './App.vue'
import * as filters from './filter'
import quanjuzujian from './components/quanjuzujian.vue'
Vue.component('quanjuzujian',quanjuzujian)
new Vue({
render: h => h(App),
}).$mount('#app')
C、在其他vue文件中使用该组件
<quanjuzujian><<quanjuzujian/>
注意
Vue.use是注册插件,Vue.component是注册组件
Vue.use可以接受一个对象,对象必须使用install( )方法,这个方法名不能改变。
第二种定义方法
A、定义组件:Loading.vue
B、新建load.js文件
import Loading from '组件地址'
const Load = {
install(Vue){
Vue.component('Loading',Loading)
}
}
export default Load
注意:
这里要注意的是install()方法名不能改变
C、在main.js文件中导入load.js文件,并注册全局
import load from 'js文件地址'
Vue.use(load)
局部组件:
局部组件的使用方法与平常在vue文件中使用组件的方法相同
先import导入组件,然后在component中注册组件,最后在template标签中使用