簡單的了解下關(guān)于 VUE 的動態(tài)組件和插槽

組件進(jìn)階-props校驗(yàn)
props校驗(yàn)
普通格式:props: ["propA", "propB"]。沒有類型檢查
高階格式:
props: {
// 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗(yàn)證)
propA: Number,
// 多個(gè)可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認(rèn)值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認(rèn)值的對象
propE: {
type: Object,
// 對象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
default: function () {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
復(fù)制代碼
組件進(jìn)階 - 動態(tài)組件
目標(biāo)效果

需求: 完成一個(gè)注冊功能頁面, 2個(gè)按鈕切換, 額外封裝兩個(gè)組件:一個(gè)填寫注冊信息, 一個(gè)填寫用戶簡介信息
目標(biāo): 多個(gè)組件使用同一個(gè)掛載點(diǎn),并可以動態(tài)切換,這就是動態(tài)組件
目錄結(jié)構(gòu)
根組件
├── App.vue
└── components
├── UserName.vue # 用戶名和密碼輸入框
└── UserInfo.vue # 人生格言和自我介紹框
復(fù)制代碼
格式
<component :is="comName"></component>
操作
UserName.vue
<template>
<div>
<h2>UserName</h2>
<p>用戶名:<input /> </p>
<p>密碼:<textarea /> </p>
</div>
</template>
<script>
export default {
}
</script>
復(fù)制代碼
在父組件App.vue中使用
<template>
<div>
<button @click="comName = 'UserName'">賬號密碼填寫</button>
<button @click="comName = 'UserInfo'">個(gè)人信息填寫</button>
<p>下面顯示注冊組件:</p>
<div style="border: 1px solid red">
<!-- vue內(nèi)置的組件component, 可以動態(tài)顯示組件 -->
<component :is="comName"></component>
</div>
</div>
</template>
<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
data() {
return {
comName: "UserName",
};
},
components: {
UserName,
UserInfo,
},
};
</script>
復(fù)制代碼
注意
is只能是動態(tài)屬性=》 :is="組件注冊后的標(biāo)簽名字符串或data變量"不能直接拿注冊標(biāo)簽名賦值使用
小結(jié)
vue內(nèi)置component組件, 配合is屬性, 設(shè)置要顯示的組件標(biāo)簽名字
組件進(jìn)階-keep-alive組件
目標(biāo)
掌握組件緩存的使用
背景
組件切換會導(dǎo)致組件被頻繁銷毀和重新創(chuàng)建, 大多數(shù)情況下是有自己的意義的,但也可能會導(dǎo)致不必要的性能損耗
演示1: 可以先給UserName.vue和UserInfo.vue 注冊created和destroyed生命周期事件, 觀察創(chuàng)建和銷毀過程
keep-alive
使用Vue內(nèi)置的keep-alive組件, 可以讓包裹的組件保存在內(nèi)存中不被銷毀
格式
演示2: 使用keep-alive內(nèi)置的vue組件, 讓動態(tài)組件緩存而不是銷毀
補(bǔ)充生命周期:
activated - 激活 deactivated - 失去激活狀態(tài)
<keep-alive>
<!-- vue內(nèi)置的組件component, 可以動態(tài)顯示組件 -->
<component :is="comName"></component>
</keep-alive>
復(fù)制代碼
小結(jié)
keep-alive可以提高組件的性能, 內(nèi)部包裹的標(biāo)簽不會被銷毀和重新創(chuàng)建, 觸發(fā)激活和非激活的生命周期方法
組件進(jìn)階-keep-alive組件-指定緩存
目標(biāo)
掌握keep-alive的include屬性的用法
語法
`include="組件名1,組件名2..."``:include="['組件名1', '組件名2']"`
<keep-alive include="name1,name2">
<!-- vue內(nèi)置的組件component, 可以動態(tài)顯示組件 -->
<component :is="comName"></component>
</keep-alive>
復(fù)制代碼
注意:
匹配首先檢查組件自身的 name 選項(xiàng),如果 name 選項(xiàng)不可用,則匹配它的局部注冊名稱 (父組件 components 選項(xiàng)的鍵值)
組件進(jìn)階 - 默認(rèn)插槽
目標(biāo)
掌握組件插槽的使用
理解
生活中的插槽

vue中的插槽
組件通過插槽傳入自定義結(jié)構(gòu) 用于實(shí)現(xiàn)組件的內(nèi)容分發(fā), 通過 slot 標(biāo)簽, 可以接收到寫在組件標(biāo)簽內(nèi)的內(nèi)容 vue提供組件插槽能力, 允許開發(fā)者在封裝組件時(shí),把不確定的部分定義為插槽
格式
在定義組件時(shí),在template中用slot來占個(gè)坑;
使用時(shí),將組件之間的內(nèi)容來填坑;

示例
組件進(jìn)階-具名插槽
目標(biāo)
掌握具名插槽的使用
背景
當(dāng)一個(gè)組件內(nèi)有2處以上需要外部傳入標(biāo)簽的地方
格式
定義:
使用:
<template #xxx>;
圖示:

傳入的標(biāo)簽可以分別派發(fā)給不同的slot位置 v-slot一般跟template標(biāo)簽使用 (template是html5新出標(biāo)簽內(nèi)容模板元素, 不會渲染到頁面上, 一般被vue解析為內(nèi)部標(biāo)簽)
示例
子組件-Pannel2.vue
<div class="container" v-show="isShow">
<slot name="one"></slot>
<slot name="two"></slot>
</div>
復(fù)制代碼
2 .父組件-UseSlot2.vue
v-slot可以簡化成#使用
v-bind可以省略成:
v-on: 可以省略成@
v-slot: 可以簡化成#
寫法1:
<Pannel2>
<template v-slot:one>
<img src="../assets/mm.gif" alt="" />
</template>
<template v-slot:two>
<span>我是文字哦</span>
</template>
</Pannel2>
復(fù)制代碼
寫法2:
<Pannel2>
<!-- 簡化寫法 -->
<template #one>
<div>
<p>寒雨連江夜入?yún)?</p>
<p>平明送客楚山孤。</p>
<p>洛陽親友如相問,</p>
<p>一片冰心在玉壺。</p>
</div>
</template>
<template #two>
<img src="../assets/mm.gif" alt="" />
</template>
</Pannel2>
復(fù)制代碼
小結(jié)
slot有可以設(shè)置多個(gè) 定義組件時(shí):slot的name屬性起插槽名 使用組件時(shí), template配合#插槽名傳入具體html標(biāo)簽或組件
組件進(jìn)階-作用域插槽(難點(diǎn))

目標(biāo)
掌握作用域插槽的用法
目標(biāo): 子組件中的數(shù)據(jù), 在給插槽賦值時(shí)在父組件環(huán)境下使用=> 子傳父=》傳數(shù)據(jù)
步驟
創(chuàng)建子組件, 準(zhǔn)備slot, 在slot上綁定屬性和子組件值 使用子組件, 傳入自定義標(biāo)簽, 用template和v-slot="自定義變量名" 自定義變量名會自動綁定slot上所有屬性, 就可以使用子組件內(nèi)值, 并替換slot位置
示例
具名插槽, 給slot綁定屬性和值

<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h2>子組件</h2>
<!-- 給slot上補(bǔ)充自定義的屬性 -->
<slot name="content" :a="1" :b="2">
默認(rèn)內(nèi)容
</slot>
</div>
</template>
<script>
export default {
}
</script>
復(fù)制代碼
父組件
<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h1>45-插槽-作用域插槽</h1>
<MyCom>
<!--
v-slot:插槽名="對象"
對象會自動接收這個(gè)插槽傳遞回來自定義屬性
-->
<template v-slot:content="scope">
<!-- <h1>自定義的內(nèi)容,填坑, {{scope}}</h1> -->
<h3>{{scope.a}}</h3>
<p>{{scope.b}}</p>
</template>
</MyCom>
</div>
</template>
<script>
// 父傳子
// 1.傳數(shù)據(jù)。 自定義屬性 (父) props(子)
// 2.傳結(jié)構(gòu)。 在組件中寫內(nèi)容(父) slot (子)
import MyCom from './MyCom.vue'
export default {
components: { MyCom }
}
</script>
<style scoped>
.content{
background-color: #ccc;
}
</style>
復(fù)制代碼
小結(jié)
組件內(nèi)變量綁定在slot上, 然后使用組件v-slot:插槽名字="變量" ,變量上就會綁定slot傳遞的屬性和值
自定義指令-基本使用
自定義指令文檔[1](了解)
除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)等,Vue 也允許注冊自定義指令=》 v-xxx
html+css+js的復(fù)用的主要形式是組件 你需要對普通 DOM 元素進(jìn)行底層操作,這時(shí)候就會用到自定義指令
作用
擴(kuò)展標(biāo)簽額外的功能
自定義指令-定義方式
{
data(){},
methods: {},
directives: {
focus: { // 自定義指令名
inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動觸發(fā)此函數(shù)
el.focus()
}
},
},
}
復(fù)制代碼
示例 自動獲取焦點(diǎn)
<template>
<div>
<input type="text" v-focus />
</div>
</template>
<script>
export default {
// 注冊
directives: {
focus: { // 自定義指令名
inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動觸發(fā)此函數(shù)
el.focus()
}
}
}
}
</script>
復(fù)制代碼
自定義指令-傳值和更新
目標(biāo): 使用自定義指令, 傳入一個(gè)值
需求: 定義color指令-傳入一個(gè)顏色, 給標(biāo)簽設(shè)置文字顏色
main.js定義處修改一下
directives: {
"color":{
inserted(el, binding){ // 插入時(shí)觸發(fā)此函數(shù)
el.style.color = binding.value;
},
update(el, binding){ // 更新綁定的變量時(shí)觸發(fā)此函數(shù)=》手動更新
el.style.color = binding.value;
}
}
}
復(fù)制代碼
Direct.vue處更改一下
<p v-color="theColor" @click="changeColor">使用v-color指令控制顏色, 點(diǎn)擊變藍(lán)</p>
<script>
data() {
return {
theColor: "red",
};
},
methods: {
changeColor() {
this.theColor = 'blue';
},
},
</script>
復(fù)制代碼
總結(jié): v-xxx, 自定義指令, 獲取原生DOM, 自定義操作
關(guān)于本文
作者:pain_past_is_pleasur
https://juejin.cn/post/7095716277196587039
