使用vue slot封装公共组件
使用slot插槽封装
使用vue slot封装公共组件公用子组件：publicSlot
<div>
<div class="top">
<h1 class="title">{{title}}</h1>
<slot name="headerRight"> 可以根据你slot name属性选择插槽的位置</slot>
</div>
<slot> 这里相当于留个位置，接收父组件传入的内容</slot>
</div>
export default {
props: {
title: {
type: String
}
},
}
父组件：
<!-- 方式审核 -->
<publicSlot :title="title">
<div class="main_box">
//这里可以写父组件自定义页面的内容
<el-form :model="formDatas" label-width="120px">
<el-row>
<el-col :span="11">
<el-form-item label="选择区域：">
<el-select v-model="formDatas.region">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="输入框：">
<el-input
type="textarea"
v-model="textarea"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
//这里是插入了一个按钮
<div slot="headerRight">
<el-button type="text">操作按钮</el-button>
</div>
</publicSlot>
import publicSlot from '../public/components/publicSlot.vue'
export default {
publicSlot
}
vue slot：
vue 插槽：
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。
具名插槽
作用域插槽
动态插槽
使用slot插槽封装1.封装头部组件
<template>
<div class="head_container">
<slot name="left"></slot>
<div>
<span>{{ title }}</span>
</div>
<slot name="right"></slot>
</div>
</template>
export default {
name: "homeTop",
//定义props的title属性
props: {
title: String,
},
}
2.在main.js中全局导出组件
import HeadTop from './views/HeadTop.vue'
Vue.component('HeadTop', HeadTop)
3.当你要使用组件的时候 如果只要中间的title ，那么solt插槽就不要使用
<HeadTop title="我的"></HeadTop>
4.如果左右两边都需要加东西，那么就使用插槽，因为在之前定义了插槽的名字，所以调用的时候需要指定插槽的name，判断你是加在哪里
<HeadTop :title="address.name">
<div class="icon" slot="left">
<i class="el-icon-search"></i>
</div>
<div class="login" slot="right" @click="goToLogin">
<span>登录</span>/
<span>注册</span>
</div>
</HeadTop>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。