Vue中插槽和過(guò)濾器的深入講解

目錄

插槽

什么是插槽？

概念

Vue 實(shí)現了一套內容分發(fā)的 API，為組件提供了一個(gè) <slot> 元素作為承載分發(fā)內容的出口。

簡(jiǎn)單來(lái)說(shuō)就是<slot> 元素作為組件模板之中的內容分發(fā)插槽。<slot> 元素自身將被替換。

插槽內容

語(yǔ)法

首先先新建一個(gè)文件來(lái)書(shū)寫(xiě)我們的slot

// slot.vue

<template>
  <div>
    <div>
      <!--分發(fā)內容的內容會(huì )被承載到這個(gè)slot標簽位置 -->
      <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的內容</h2>
    </slotCom>
  </div>
</template>

<script>
// 引入
import slotCom from "../views/slot";

export default {
  components: {
    slotCom
  },
}
</script>

<style>
</style>

從效果圖（下圖）中我們可以看到h2標簽的那句話(huà)已經(jīng)被渲染在了頁(yè)面上，標簽位置也對應上了slot.vue文件中的標簽

注意

如果 <SlotTest> 的 template 中沒(méi)有包含一個(gè) <slot> 元素，則該組件對稱(chēng)標簽內部的任何內容都會(huì )被拋棄。

編譯作用域

當你想在一個(gè)插槽中使用數據時(shí)，例如：

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

該插槽跟模板的其它地方一樣可以訪(fǎng)問(wèn)相同的實(shí)例 property (也就是相同的“作用域”)，而不能訪(fǎng)問(wèn) <navigation-link> 的作用域。例如 url 是訪(fǎng)問(wèn)不到的：

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}

  /*  這里的 `url` 會(huì )是 undefined，因為其 (指該插槽的) 內容是
      _傳遞給_ <navigation-link> 的而不是
      在 <navigation-link> 組件*內部*定義的。
  */
</navigation-link>

作為一條規則，請記?。?/p>

父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。

后備內容

<slot> 元素內部可以設置后備內容,如果當前組件對稱(chēng)標簽內部沒(méi)有插入任何內容的話(huà),組件最終會(huì )渲染后備內容。簡(jiǎn)單來(lái)說(shuō)就是相當于插槽的默認值。
舉例

// 一個(gè)按鈕組件，設置后備內容為文字Submit
<button type="submit">
  <slot>Submit</slot>
</button>

// 當我在一個(gè)父級組件中使用 <submit-button> 并且不提供任何插槽內容時(shí)：
<submit-button></submit-button>

// 后備內容“Submit”將會(huì )被渲染：
<button type="submit">
  Submit
</button>

// 但是如果我們提供內容：
<submit-button>
  Save
</submit-button>

// 則這個(gè)提供的內容將會(huì )被渲染從而取代后備內容：
<button type="submit">
  Save
</button>

具名插槽

概念有時(shí)我們組件需要多個(gè)插槽?？梢詫⒉煌慕M件插入到不同插槽內部，實(shí)現方法是使用具名插槽，給組件中的<slot> 元素設置一個(gè)name屬性。在向具名插槽提供內容的時(shí)候，我們可以在一個(gè) <template> 元素上使用 v-slot 指令將對應的內容插入到指定的<slot> 元素上

語(yǔ)法

// login-component.vue

<template>
    <div>
        <div>
            <slot>后備內容</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的內容</h2>

        <template v-slot:user>    
            <!-- 這里所有的內容都會(huì )被插入到name="user" 插槽中 -->
            <div>
                123
            </div>
        </template>


        <input slot="psd" type="password" placeholder="這個(gè)元素會(huì )被插入到name=psd 插槽中">
        <component-a slot="psd"></component-a> 

</login-component>

注意

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫(xiě)，即把參數之前的所有內容 (v-slot:) 替換為字符 #。例如 v-slot:header 可以被重寫(xiě)為 #header

<login-component>
            <h2>我是分發(fā)到slot的內容</h2>

            <template #user>    
                這里所有的內容都會(huì )被插入到name="user" 插槽中
                <div>
                    123
                </div>
            </template>


            <template #psd>    
               <input type="password" placeholder="這個(gè)元素會(huì )被插入到name=psd 插槽中">
            </template>
</login-component>

我個(gè)人覺(jué)得插槽在項目開(kāi)發(fā)中不太常用，常用于一些UI庫的開(kāi)發(fā)。如果想對插槽有更深的了解可以查閱官方文檔…

過(guò)濾器

概念

Vue.js 允許你自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開(kāi)始支持)。過(guò)濾器應該被添加在 JavaScript 表達式的尾部，由“|”符號指示：

語(yǔ)法

filter支持全局過(guò)濾器或者局部過(guò)濾器

全局過(guò)濾器

<div id="app">
    {{str | capitalize}}  // Hello
</div>

// 單詞首字母大寫(xiě)
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'
    }
})

局部過(guò)濾器

<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è)參數,直接向substr傳遞的參數會(huì )依次作為filter方法的第二第三....個(gè)參數

<div>{{'hello' | substr(3,4)}}</div>
<script>
{
    filters: {
       substr(str,start,end) {
           return str.substr(start,end)
       } 
    }
}
</script>

練習

實(shí)現一個(gè)過(guò)濾器,能夠將時(shí)間戳字符串按照指定的模板返回對應結構的時(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]
                    // 判斷當前模板時(shí)間是 兩位 還是 一位的
                    // 如果是兩位 個(gè)位數時(shí)間需要前面加零, 1 -> 01 
                    // 如果是一位 不用加零操作
                    if (RegExp.$1.length > 1) {

                        time = time >= 10 ? time : '0' + time
                    }
                    template = template.replace(reg, time)
                }
            }
            return template
        }
    }
})
</script>

總結

到此這篇關(guān)于Vue中插槽和過(guò)濾器的文章就介紹到這了,更多相關(guān)Vue插槽和過(guò)濾器內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！