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

需求: 完成一個注冊功能頁面, 2個按鈕切換, 額外封裝兩個組件:一個填寫注冊信息, 一個填寫用戶簡介信息
目標: 多個組件使用同一個掛載點,并可以動態(tài)切換,這就是動態(tài)組件
目錄結(jié)構(gòu):
根組件
├── App.vue
└── components
├── UserName.vue # 用戶名和密碼輸入框
?? └── UserInfo.vue # 人生格言和自我介紹框格式:
<component :is="comName"></component>
操作:
UserName.vue
<template>
<div>
<h2>UserName</h2>
<p>用戶名:<input /> </p>
<p>密碼:<textarea /> </p>
</div>
</template>
<script>
export default {
}
</script>在父組件App.vue中使用:
<template>
<div>
<button @click="comName = 'UserName'">賬號密碼填寫</button>
<button @click="comName = 'UserInfo'">個人信息填寫</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>注意:
- is只能是動態(tài)屬性=》
:is="組件注冊后的標簽名字符串或data變量" - 不能直接拿注冊標簽名賦值使用
小結(jié):
vue內(nèi)置component組件, 配合is屬性, 設(shè)置要顯示的組件標簽名字
組件進階-keep-alive組件
目標:
掌握組件緩存的使用
背景:
組件切換會導(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)組件緩存而不是銷毀
補充生命周期:
- activated - 激活
- deactivated - 失去激活狀態(tài)
<keep-alive>
<!-- vue內(nèi)置的組件component, 可以動態(tài)顯示組件 -->
<component :is="comName"></component>
</keep-alive>小結(jié):
keep-alive可以提高組件的性能, 內(nèi)部包裹的標簽不會被銷毀和重新創(chuàng)建, 觸發(fā)激活和非激活的生命周期方法
組件進階-keep-alive組件-指定緩存
目標:
掌握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>注意:
匹配首先檢查組件自身的 name 選項,如果 name 選項不可用,則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)
組件進階 - 默認插槽
目標:
掌握組件插槽的使用
理解:
生活中的插槽

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

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

- 傳入的標簽可以分別派發(fā)給不同的slot位置
- v-slot一般跟template標簽使用 (template是html5新出標簽內(nèi)容模板元素, 不會渲染到頁面上, 一般被vue解析為內(nèi)部標簽)
示例:
1.子組件-Pannel2.vue
<div class="container" v-show="isShow">
<slot name="one"></slot>
<slot name="two"></slot>
</div>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>寫法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>小結(jié):
- slot有可以設(shè)置多個
- 定義組件時:slot的name屬性起插槽名
- 使用組件時, template配合#插槽名傳入具體html標簽或組件
組件進階-作用域插槽(難點)

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

<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h2>子組件</h2>
<!-- 給slot上補充自定義的屬性 -->
<slot name="content" :a="1" :b="2">
默認內(nèi)容
</slot>
</div>
</template>
<script>
export default {
}
</script>父組件
<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h1>45-插槽-作用域插槽</h1>
<MyCom>
<!--
v-slot:插槽名="對象"
對象會自動接收這個插槽傳遞回來自定義屬性
-->
<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>小結(jié):
組件內(nèi)變量綁定在slot上, 然后使用組件v-slot:插槽名字="變量" ,變量上就會綁定slot傳遞的屬性和值
自定義指令-基本使用
自定義指令文檔(了解)
除了核心功能默認內(nèi)置的指令 (v-model 和 v-show)等,Vue 也允許注冊自定義指令=》 v-xxx
- html+css+js的復(fù)用的主要形式是組件
- 你需要對普通 DOM 元素進行底層操作,這時候就會用到自定義指令
作用:
擴展標簽額外的功能
自定義指令-定義方式
{
data(){},
methods: {},
directives: {
focus: { // 自定義指令名
inserted(el){ // 固定配置項 - 當指令插入到標簽自動觸發(fā)此函數(shù)
el.focus()
}
},
},
}示例 自動獲取焦點
<template>
<div>
<input type="text" v-focus />
</div>
</template>
<script>
export default {
// 注冊
directives: {
focus: { // 自定義指令名
inserted(el){ // 固定配置項 - 當指令插入到標簽自動觸發(fā)此函數(shù)
el.focus()
}
}
}
}
</script>自定義指令-傳值和更新
目標: 使用自定義指令, 傳入一個值
需求: 定義color指令-傳入一個顏色, 給標簽設(shè)置文字顏色
main.js定義處修改一下:
directives: {
"color":{
inserted(el, binding){ // 插入時觸發(fā)此函數(shù)
el.style.color = binding.value;
},
update(el, binding){ // 更新綁定的變量時觸發(fā)此函數(shù)=》手動更新
el.style.color = binding.value;
}
}
}Direct.vue處更改一下:
<p v-color="theColor" @click="changeColor">使用v-color指令控制顏色, 點擊變藍</p>
<script>
data() {
return {
theColor: "red",
};
},
methods: {
changeColor() {
this.theColor = 'blue';
},
},
</script>總結(jié):
v-xxx, 自定義指令, 獲取原生DOM, 自定義操作
到此這篇關(guān)于vue.js動態(tài)組件和插槽的使用匯總的文章就介紹到這了,更多相關(guān)vue.js動態(tài)組件和插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+elementUI 復(fù)雜表單的驗證、數(shù)據(jù)提交方案問題
這篇文章主要介紹了vue+elementUI 復(fù)雜表單的驗證、數(shù)據(jù)提交方案,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06

