vue全局注册组件,局部注册组件
1.注册全局组件全局组件可以在任何地方使用,而且不需要进行在单独页面注册。使用方法:第一步:在components文件夹下面建了两个vue组件页面。第二步:在plugin中建一个common.js文件,这个相当于是一个公用js专门用来存储导入的公用组件。代码如下://把dialog和message组件都导入,install安装并注册组件import dialog from '@/component
·
1.注册全局组件方式一
全局组件可以在任何地方使用,而且不需要进行在单独页面注册。
使用方法:
第一步:
在components文件夹下面建了两个vue组件页面。
第二步:
在plugin中建一个common.js文件,这个相当于是一个公用js专门用来存储导入的公用组件。
代码如下:
//把dialog和message组件都导入,install安装并注册组件
import dialog from '@/components/dialog.vue'
import message from '@/components/message.vue'
const loading = {
install(Vue) {
//注意组件命名:建议始终使用 kebab-case 的事件名如下例子:my-event
Vue.component('dialog-com',dialog);
Vue.component('my-message',message);
}
}
export default loading
第三步:
在main.js文件中,把common.js导入,并use一下
代码如下:
import loading from './plugin/common.js'
Vue.use(loading)
2.注册全局组件方式二
1.创建了一个组件u.vue
2.直接在main.js中使用:
import myuser from './components/u.vue'
Vue.component('my-user',myuser);
3.在页面中调用该组件:
<my-user></my-user>
3.局部注册组件
1.现在创建了一个a.vue组件页面
2.在调用的页面如下使用:
<template>
<div>
<my-vue></my-vue>
</div>
</template>
<script>
//导入组件
import myvue from "@/components/a.vue";
export default {
//注册组件
components: {
//my-vue是在页面中使用组件的名称,myvue是导入的名称
"my-vue": myvue,
},
data() {
return {};
},
};
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)