vue如何使用vue slot封裝公共組件

更新時(shí)間：2022年05月27日 14:42:12 作者：還需學(xué)習(xí)學(xué)習(xí)

這篇文章主要介紹了vue如何使用vue slot封裝公共組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用vue slot封裝公共組件

公用子組件：publicSlot

? ? ? <div>
? ? ? ? <div class="top">
? ? ? ? <h1 class="title">{{title}}</h1>
? ? ? ? ?? ?<slot name="headerRight"> 可以根據(jù)你slot name屬性選擇插槽的位置</slot>
? ? ? ? </div>
? ? ? ? <slot> 這里相當(dāng)于留個(gè)位置，接收父組件傳入的內(nèi)容</slot>
? ? ? </div>

export default {
? ? props: {
? ? title: {
? ? ? type: String
? ? }
? },
? }

父組件：

? ? ?<!-- 方式審核 -->
? ? ? <publicSlot :title="title">
? ? ? ? <div class="main_box">
? ? ? ? ? ? //這里可以寫父組件自定義頁面的內(nèi)容
? ? ? ? ? <el-form :model="formDatas" label-width="120px">
? ? ? ? ? ? <el-row>
? ? ? ? ? ? ? <el-col :span="11">
? ? ? ? ? ? ? ? <el-form-item label="選擇區(qū)域：">
? ? ? ? ? ? ? ? ? <el-select v-model="formDatas.region">
? ? ? ? ? ? ? ? ? ? <el-option label="區(qū)域一" value="shanghai"></el-option>
? ? ? ? ? ? ? ? ? ? <el-option label="區(qū)域二" 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>
? ? ? ?//這里是插入了一個(gè)按鈕
? ? ? ?<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 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將元素作為承載分發(fā)內(nèi)容的出口。

具名插槽
作用域插槽
動(dòng)態(tài)插槽

使用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中全局導(dǎo)出組件

import HeadTop from './views/HeadTop.vue'
Vue.component('HeadTop', HeadTop)

3.當(dāng)你要使用組件的時(shí)候如果只要中間的title ，那么solt插槽就不要使用

<HeadTop title="我的"></HeadTop>

4.如果左右兩邊都需要加?xùn)|西，那么就使用插槽，因?yàn)樵谥岸x了插槽的名字，所以調(diào)用的時(shí)候需要指定插槽的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>注冊(cè)</span>
? ? ? </div>
? ? </HeadTop>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: