Vue中插槽和過濾器的深入講解
插槽
什么是插槽？
概念
Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，為組件提供了一個(gè) <slot> 元素作為承載分發(fā)內(nèi)容的出口。
簡單來說就是<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插槽。<slot> 元素自身將被替換。
插槽內(nèi)容
語法
首先先新建一個(gè)文件來書寫我們的slot
// slot.vue
<template>
<div>
<div>
<!--分發(fā)內(nèi)容的內(nèi)容會被承載到這個(gè)slot標(biāo)簽位置 -->
<slot></slot>
</div>
<p>賬號: <input /></p>
<p>密碼: <input type="password" /></p>
<button>登錄</button>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
然后我們在另一個(gè)組件中(SlotTest)使用
// SlotTest.vue
<template>
<div>
<slotCom>
<h2>我是分發(fā)到slot的內(nèi)容</h2>
</slotCom>
</div>
</template>
<script>
// 引入
import slotCom from "../views/slot";
export default {
components: {
slotCom
},
}
</script>
<style>
</style>
從效果圖（下圖）中我們可以看到h2標(biāo)簽的那句話已經(jīng)被渲染在了頁面上，標(biāo)簽位置也對應(yīng)上了slot.vue文件中的標(biāo)簽
注意
如果 <SlotTest> 的 template 中沒有包含一個(gè) <slot> 元素，則該組件對稱標(biāo)簽內(nèi)部的任何內(nèi)容都會被拋棄。
編譯作用域
當(dāng)你想在一個(gè)插槽中使用數(shù)據(jù)時(shí)，例如：
<navigation-link url="/profile">
Logged in as {{ user.name }}
</navigation-link>
該插槽跟模板的其它地方一樣可以訪問相同的實(shí)例 property (也就是相同的“作用域”)，而不能訪問 <navigation-link> 的作用域。例如 url 是訪問不到的：
<navigation-link url="/profile">
Clicking here will send you to: {{ url }}
/* 這里的 `url` 會是 undefined，因?yàn)槠?(指該插槽的) 內(nèi)容是
_傳遞給_ <navigation-link> 的而不是
在 <navigation-link> 組件*內(nèi)部*定義的。
*/
</navigation-link>
作為一條規(guī)則，請記住：
父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
后備內(nèi)容
<slot> 元素內(nèi)部可以設(shè)置后備內(nèi)容,如果當(dāng)前組件對稱標(biāo)簽內(nèi)部沒有插入任何內(nèi)容的話,組件最終會渲染后備內(nèi)容。簡單來說就是相當(dāng)于插槽的默認(rèn)值。
舉例
// 一個(gè)按鈕組件，設(shè)置后備內(nèi)容為文字Submit <button type="submit"> <slot>Submit</slot> </button> // 當(dāng)我在一個(gè)父級組件中使用 <submit-button> 并且不提供任何插槽內(nèi)容時(shí)： <submit-button></submit-button> // 后備內(nèi)容“Submit”將會被渲染： <button type="submit"> Submit </button> // 但是如果我們提供內(nèi)容： <submit-button> Save </submit-button> // 則這個(gè)提供的內(nèi)容將會被渲染從而取代后備內(nèi)容： <button type="submit"> Save </button>
具名插槽
概念有時(shí)我們組件需要多個(gè)插槽。可以將不同的組件插入到不同插槽內(nèi)部，實(shí)現(xiàn)方法是使用具名插槽，給組件中的<slot> 元素設(shè)置一個(gè)name屬性。在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè) <template> 元素上使用 v-slot 指令將對應(yīng)的內(nèi)容插入到指定的<slot> 元素上
語法
// login-component.vue
<template>
<div>
<div>
<slot>后備內(nèi)容</slot>
</div>
<p>
賬號: <slot name="user"></slot>
</p>
<p>
密碼: <slot name="psd"></slot>
</p>
<button>登錄</button>
<slot></slot>
</div>
</template>
// 使用
<login-component>
<h2>我是分發(fā)到slot的內(nèi)容</h2>
<template v-slot:user>
<!-- 這里所有的內(nèi)容都會被插入到name="user" 插槽中 -->
<div>
123
</div>
</template>
<input slot="psd" type="password" placeholder="這個(gè)元素會被插入到name=psd 插槽中">
<component-a slot="psd"></component-a>
</login-component>
注意
跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #。例如 v-slot:header 可以被重寫為 #header
<login-component>
<h2>我是分發(fā)到slot的內(nèi)容</h2>
<template #user>
這里所有的內(nèi)容都會被插入到name="user" 插槽中
<div>
123
</div>
</template>
<template #psd>
<input type="password" placeholder="這個(gè)元素會被插入到name=psd 插槽中">
</template>
</login-component>
我個(gè)人覺得插槽在項(xiàng)目開發(fā)中不太常用，常用于一些UI庫的開發(fā)。如果想對插槽有更深的了解可以查閱官方文檔cn.vuejs.org/v2/guide/co…
過濾器
概念
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個(gè)地方：雙花括號插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“|”符號指示：
語法
filter支持全局過濾器或者局部過濾器
全局過濾器
<div id="app">
{{str | capitalize}} // Hello
</div>
// 單詞首字母大寫
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: '#app',
data: {
str: 'hello'
}
})
局部過濾器
<div id="app">
<div v-for="(f,i) in friends" :key="i">
<h3>姓名: {{f.name}} </h2>
<p>年齡: {{f.age}}</p>
<p>性別: {{f.sex|getSex}}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
friends: [{
name: 'Max',
sex: 0,
age: 19
},
{
name: 'Jack',
sex: 1,
age: 22
},
{
name: 'Jacose',
sex: 1,
age: 19
},
{
name: 'Tim',
sex: 1,
age: 18
},
{
name: 'Jimmy',
sex: 0,
age: 20
},
{
name: 'Tom',
sex: 0,
age: 19
},
]
},
filters: {
getSex(type) {
if (type === 0) {
return '男'
}
return '女'
}
}
})
</script>
注意: filter支持傳遞多個(gè)參數(shù),直接向substr傳遞的參數(shù)會依次作為filter方法的第二第三....個(gè)參數(shù)
<div>{{'hello' | substr(3,4)}}</div>
<script>
{
filters: {
substr(str,start,end) {
return str.substr(start,end)
}
}
}
</script>
練習(xí)
實(shí)現(xiàn)一個(gè)過濾器,能夠?qū)r(shí)間戳字符串按照指定的模板返回對應(yīng)結(jié)構(gòu)的時(shí)間
// 例
<p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56
<p>{1599639292100 | getTemplateTimeByDate('YYYY-M-d h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('YYYY年M月d日 hh:mm')}</p> -> 2020年9年9 15:04
new Vue({
el: '#app',
data: {
date: new Date().getTime()
},
filters: {
getTemplateTimeByDate(date, template) {
date = new Date(date)
let TimeObj = {
'Y+': date.getFullYear(),
'(M+)': date.getMonth() + 1,
'(d+)': date.getDate(),
'(h+)': date.getHours(),
'(m+)': date.getMinutes(),
'(s+)': date.getSeconds()
}
for (key in TimeObj) {
let reg = new RegExp(key)
if (reg.test(template)) {
console.log(RegExp.$1)
let time = TimeObj[key]
// 判斷當(dāng)前模板時(shí)間是 兩位 還是 一位的
// 如果是兩位 個(gè)位數(shù)時(shí)間需要前面加零, 1 -> 01
// 如果是一位 不用加零操作
if (RegExp.$1.length > 1) {
time = time >= 10 ? time : '0' + time
}
template = template.replace(reg, time)
}
}
return template
}
}
})
</script>
總結(jié)
到此這篇關(guān)于Vue中插槽和過濾器的文章就介紹到這了,更多相關(guān)Vue插槽和過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
本文將結(jié)合實(shí)例代碼，介紹Vue批量更新dom的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
Vue3+Vite+ElementPlus管理系統(tǒng)常見問題
本文記錄了使用Vue3+Vite+ElementPlus從0開始搭建一個(gè)前端工程會面臨的常見問題，沒有技術(shù)深度，但全都是解決實(shí)際問題的干貨，可以當(dāng)作是問題手冊以備后用，感興趣的朋友參考下2023-12-12
vuex實(shí)現(xiàn)數(shù)據(jù)持久化的兩種方案
這兩天在做vue項(xiàng)目存儲個(gè)人信息的時(shí)候,遇到了頁面刷新后個(gè)人信息數(shù)據(jù)丟失的問題,在查閱資料后,我得出兩種解決數(shù)據(jù)丟失,使用數(shù)據(jù)持久化的方法,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關(guān)于用vite簡單搭建ts+vue3全家桶的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue 實(shí)現(xiàn)撥打電話操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
因?yàn)楸救耸褂玫氖莣ebstorm2016 2.3版本，結(jié)果竟然不支持vue文件，所以找到了一個(gè)解決方法，下面這篇文章主要給大家介紹了關(guān)于webstorm添加vue支持的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉菜單效果，運(yùn)用了hover顯示與隱藏以及定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe
這篇文章主要介紹了Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04