Vue中插槽和過濾器的深入講解
插槽
什么是插槽？
概念
Vue 實現(xiàn)了一套內(nèi)容分發(fā)的 API，為組件提供了一個 <slot> 元素作為承載分發(fā)內(nèi)容的出口。
簡單來說就是<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插槽。<slot> 元素自身將被替換。
插槽內(nèi)容
語法
首先先新建一個文件來書寫我們的slot
// slot.vue
<template>
<div>
<div>
<!--分發(fā)內(nèi)容的內(nèi)容會被承載到這個slot標簽位置 -->
<slot></slot>
</div>
<p>賬號: <input /></p>
<p>密碼: <input type="password" /></p>
<button>登錄</button>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
然后我們在另一個組件中(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標簽的那句話已經(jīng)被渲染在了頁面上，標簽位置也對應(yīng)上了slot.vue文件中的標簽
注意
如果 <SlotTest> 的 template 中沒有包含一個 <slot> 元素，則該組件對稱標簽內(nèi)部的任何內(nèi)容都會被拋棄。
編譯作用域
當你想在一個插槽中使用數(shù)據(jù)時，例如：
<navigation-link url="/profile">
Logged in as {{ user.name }}
</navigation-link>
該插槽跟模板的其它地方一樣可以訪問相同的實例 property (也就是相同的“作用域”)，而不能訪問 <navigation-link> 的作用域。例如 url 是訪問不到的：
<navigation-link url="/profile">
Clicking here will send you to: {{ url }}
/* 這里的 `url` 會是 undefined，因為其 (指該插槽的) 內(nèi)容是
_傳遞給_ <navigation-link> 的而不是
在 <navigation-link> 組件*內(nèi)部*定義的。
*/
</navigation-link>
作為一條規(guī)則，請記?。?/p>
父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
后備內(nèi)容
<slot> 元素內(nèi)部可以設(shè)置后備內(nèi)容,如果當前組件對稱標簽內(nèi)部沒有插入任何內(nèi)容的話,組件最終會渲染后備內(nèi)容。簡單來說就是相當于插槽的默認值。
舉例
// 一個按鈕組件，設(shè)置后備內(nèi)容為文字Submit <button type="submit"> <slot>Submit</slot> </button> // 當我在一個父級組件中使用 <submit-button> 并且不提供任何插槽內(nèi)容時： <submit-button></submit-button> // 后備內(nèi)容“Submit”將會被渲染： <button type="submit"> Submit </button> // 但是如果我們提供內(nèi)容： <submit-button> Save </submit-button> // 則這個提供的內(nèi)容將會被渲染從而取代后備內(nèi)容： <button type="submit"> Save </button>
具名插槽
概念有時我們組件需要多個插槽。可以將不同的組件插入到不同插槽內(nèi)部，實現(xiàn)方法是使用具名插槽，給組件中的<slot> 元素設(shè)置一個name屬性。在向具名插槽提供內(nèi)容的時候，我們可以在一個 <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="這個元素會被插入到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="這個元素會被插入到name=psd 插槽中">
</template>
</login-component>
我個人覺得插槽在項目開發(fā)中不太常用，常用于一些UI庫的開發(fā)。如果想對插槽有更深的了解可以查閱官方文檔cn.vuejs.org/v2/guide/co…
過濾器
概念
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達式的尾部，由“|”符號指示：
語法
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支持傳遞多個參數(shù),直接向substr傳遞的參數(shù)會依次作為filter方法的第二第三....個參數(shù)
<div>{{'hello' | substr(3,4)}}</div>
<script>
{
filters: {
substr(str,start,end) {
return str.substr(start,end)
}
}
}
</script>
練習
實現(xiàn)一個過濾器,能夠?qū)r間戳字符串按照指定的模板返回對應(yīng)結(jié)構(gòu)的時間
// 例
<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]
// 判斷當前模板時間是 兩位 還是 一位的
// 如果是兩位 個位數(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)文章
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)二級導(dǎo)航欄效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
Vue3使用el-form嵌套el-table進行單條數(shù)據(jù)的表單校驗功能
在實際開發(fā)過程中,我們經(jīng)常需要處理表格中的表單數(shù)據(jù),比如在編輯表格中的某一行數(shù)據(jù)時進行校驗,本文給大家介紹了Vue3使用el-form嵌套el-table進行單條數(shù)據(jù)的表單校驗功能,文中有相關(guān)的代碼供大家參考,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細介紹了Vue方法與事件處理器，,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue實現(xiàn)flv格式視頻播放,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
在Store倉庫里，state就是用來存放數(shù)據(jù)。如果很多組件都使用這個過濾后的數(shù)據(jù)，我們是否可以把這個數(shù)據(jù)抽提出來共享？這就是getters存在的意義。我們可以認為，getters是store的計算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下2022-01-01
Vue?vant使用ImagePreview實現(xiàn)預(yù)覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實現(xiàn)預(yù)覽圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法
大家都遇到這樣的問題,在使用函數(shù)的async/await異步調(diào)用時候,放在正常函數(shù)中單個調(diào)用時沒有問題的,但是await放在forEach()循環(huán)里面就會報錯,本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調(diào)用?async/await,感興趣的朋友一起看看吧2023-10-10