vue如何使用vue slot封装公共组件
作者：还需学习学习
这篇文章主要介绍了vue如何使用vue 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 插槽：
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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。