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

更新時間：2022年05月27日 14:42:12 作者：還需學習學習

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

使用vue slot封裝公共組件

公用子組件：publicSlot

? ? ? <div>
? ? ? ? <div class="top">
? ? ? ? <h1 class="title">{{title}}</h1>
? ? ? ? ?? ?<slot name="headerRight"> 可以根據(jù)你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="選擇區(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>
? ? ? ?//這里是插入了一個按鈕
? ? ? ?<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 實現(xiàn)了一套內容分發(fā)的 API，這套 API 的設計靈感源自 Web Components 規(guī)范草案，將元素作為承載分發(fā)內容的出口。

具名插槽
作用域插槽
動態(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中全局導出組件

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>

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

您可能感興趣的文章: