1.在src/components文件夹下创建新的公共组件
(没有components就新建一个)
<template>
<el-card>
<div class="page-tools">
<!-- 左侧 -->
<div class="left">
<div class="tips">
<i class="el-icon-info" />
<slot name="left"> <span>文字区域</span> </slot>
</div>
</div>
<div class="right">
<!-- 右侧 -->
<slot name="right">按钮区域 </slot>
</div>
</div>
</el-card>
</template>
2.在其他组件中导入、注册、使用该公共组件
import pagetools from '@/components/PageTools'
export default {
components: {
pagetools
}
}
<pagetools></pagetools>
<pagetools />
3.插槽传值修改公共组件适合自己页面
3.1公共组件设定插槽和默认值
给slot设定一个name值
-
默认组件显示
<template>
<el-card>
<div class="page-tools">
<!-- 左侧 -->
<div class="left">
<div class="tips">
<i class="el-icon-info" />
<slot name="left"> <span>文字区域</span> </slot>
</div>
</div>
<div class="right">
<!-- 右侧 -->
<slot name="right">按钮区域 </slot>
</div>
</div>
</el-card>
</template>
3.2使用插槽传入特定内容
使用template标签在标签内#slot名,然后在template双标签内传过去html内容
-
特定内容显示在组件中
<pagetools>
<template #left>
<span>测试</span>
<span>测试2</span>
</template>
<template #right>
<span>测试</span>
<span>测试2</span>
</template>
</pagetools>
4.全局注册组件Vue.component()
4.1局部组件,使用的时候需要在components中注册;全局通用组件一般是定义为全局组件的,不需要局部注册;在main.js中使用Vue.component()全局注册:
import Vue from 'vue'
// 全局注册组件
import PageTools from '@/components/PageTools'
Vue.component('PageTools', PageTools)
5.使用Vue.use全局注册组件
5.1在main.js中引入
-
Vue.use 可以接收一个对象,Vue.use(obj)
-
对象obj中需要提供一个 install 函数
-
在 Vue.use(obj) 时,会自动调用该 install 函数,并传入 Vue构造器
// 全局注册组件
import PageTools from '@/components/PageTools'
const components = {
install(Vue) {
Vue.component('PageTools', PageTools)
}
}
Vue.use(components)
5.2封装
把所有组件注册在src/components/index.js文件中
// 全局注册组件
import PageTools from '@/components/PageTools'
export default {
install(Vue) {
Vue.component('PageTools', PageTools)
}
}
5.3 在main.js中全局注册组件
import components from '@/components/index'
Vue.use(components)