全局组件和局部组件
1.全局组件和局部组件的区别全局组件:只需要在main.js中导入一次,整个项目都可以直接使用(在main.js中导入)局部组件:用一次 导一次 (在用到的地方导入)2.局部组件导入步骤// 3部曲//[1]导入子组件import Register from './Register.vue'export default {//[2]注册子组件components: { Register },co
·
1.全局组件和局部组件的区别
全局组件:只需要在main.js中导入一次,整个项目都可以直接使用(在main.js中导入)
局部组件:用一次 导一次 (在用到的地方导入)
2.局部组件导入步骤
// 3部曲
//[1]导入子组件
import Register from './Register.vue'
export default {
//[2]注册子组件components: { Register },
compontents: {
Register
},
#[3]在html中当作标签使用
3.全局组件导入步骤
//[1]导入全局组件
import Register from './Register.vue'
//[2]注册全局组件
//Vue.component('组件名',导入的组件);
// 注:若是组件名不想写死,可以使用 组件.name; Vue.component(Register.name,Register);
Vue.component('register',Register);
//[3]使用的时候就可以将定义的组件名 当作标签使用了!!!
//方法2--也可以适用Vue.use注册全局组件
//1.在utils中创建comm.js
//2.导入全局组件
//3.注册全局组件
//4.在main.js中导入comm.js
//5.Vue.use(导入的js名)
4.使用
# 在使用插槽的时候,子组件使用必须使用****双标签****
//标签名小写;(在使用时将组件名当作标签使用---注:若是组件首字母大写,我们在使用时可以改为小写;但是中间若有大写字母,使用时不能改为小写)
<register></register>
总结
一般使用多次,像路由,axios,elementUl几乎在每个文件都是用,就使用全局导入;
若是使用一两次,即像token,在登录时获取,在退出时删除,则使用局部导入;
举例说明
像这个在项目的大多数组件中都使用到了,因此可以封装为一个全局组件
在这里,使用到vant的nav-bar组件进行封装
注:此处用到了组件的 父子组件进行传值
<template>
<van-nav-bar
left-arrow
@click-left="$router.push(url)"
class="selfnavbar"
>
<template #title>
<div class="title">{{ title }}</div>
</template>
<template #left>
<div class="left iconfont" v-html="left"></div>
</template>
<template #right>
<span>{{ right }}</span>
</template>
</van-nav-bar>
</template>
封装完毕之后,在main.js引入,注册全局组件之后在项目中的任何一个组件都可以使用了
// 导入全局组件
import selfNavBar from '@/component/selfnavbar.vue'
// 注册全局组件
Vue.component('selfnavbar', selfNavBar)
使用
<selfnavbar left="" :url="'/find'"></selfnavbar>
更多推荐
已为社区贡献2条内容
所有评论(0)