In-depth explanation of slots and filters in Vue

Slots

What are slots?
Slot Contents
Compile scope
Fallback Content
Named Slots

Filters

concept
grammar
Global Filters
Local filter
practise

Summarize

Slots

What are slots?

concept

Vue implements a set of content distribution APIs, providing a <slot> element for components as an outlet for carrying distributed content.

Simply put, the <slot> element serves as a content distribution slot in a component template. The <slot> element itself will be replaced.

Slot Contents

grammar

First, create a new file to write our slot

// slot.vue

<template>
  <div>
    <div>
      <!--The content of the distribution will be carried to this slot tag position-->
      <slot></slot>
    </div>
    <p>Account: <input /></p>
    <p>Password: <input type="password" /></p>
    <button>Login</button>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

Then we use it in another component (SlotTest)

// SlotTest.vue

<template>
  <div>
    <slotCom>
        <h2>I am the content distributed to the slot</h2>
    </slotCom>
  </div>
</template>

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

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

<style>
</style>

From the effect diagram (below), we can see that the sentence in the h2 tag has been rendered on the page, and the tag position also corresponds to the tag in the slot.vue file.

Notice

If the <SlotTest> template does not contain a <slot> element, any content within the component's symmetry tags will be discarded.

Compile scope

When you want to use data in a slot, for example:

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

The slot has access to the same instance properties (and therefore the same "scope") as the rest of the template, but not to the <navigation-link>'s scope. For example, the url is not accessible:

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

  /* `url` here will be undefined because its content is _passed_ to the <navigation-link> rather than defined *inside* the <navigation-link> component.
  */
</navigation-link>

As a rule, remember:

All content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope.

Fallback Content

The <slot> element can be used to set fallback content. If no content is inserted into the current component's symmetry tag, the component will eventually render the fallback content. Simply put, it is equivalent to the default value of the slot.
Example

// A button component, set the fallback content to text Submit
<button type="submit">
  <slot>Submit</slot>
</button>

// When I use <submit-button> in a parent component and don't provide any slot content:
<submit-button></submit-button>

// The fallback content "Submit" will be rendered:
<button type="submit">
  Submit
</button>

// But if we provide content:
<submit-button>
  Save
</submit-button>

// then the provided content will be rendered instead of the fallback content:
<button type="submit">
  Save
</button>

Named Slots

Concept Sometimes our components need more than one slot. Different components can be inserted into different slots. This is done by using named slots and setting a name attribute on the <slot> element in the component. When providing content to a named slot, we can use the v-slot directive on a <template> element to insert the corresponding content into the specified <slot> element.

grammar

// login-component.vue

<template>
    <div>
        <div>
            <slot>Backup content</slot>
        </div>
        <p>
            Account: <slot name="user"></slot>
        </p>
        <p>
            Password: <slot name="psd"></slot>
        </p>

        <button>Login</button>
        <slot></slot>
    </div>
</template>

// Using <login-component>
        <h2>I am the content distributed to the slot</h2>

        <template v-slot:user>    
            <!-- All content here will be inserted into the name="user" slot-->
            <div>
                123
            </div>
        </template>


        <input slot="psd" type="password" placeholder="This element will be inserted into the name=psd slot">
        <component-a slot="psd"></component-a> 

</login-component>

Notice

Like v-on and v-bind, v-slot has an abbreviation, which is to replace everything before the parameter (v-slot:) with the character #. For example, v-slot:header can be rewritten as #header

<login-component>
            <h2>I am the content distributed to the slot</h2>

            <template #user>    
                All content here will be inserted into the name="user" slot <div>
                    123
                </div>
            </template>


            <template #psd>    
               <input type="password" placeholder="This element will be inserted into the name=psd slot">
            </template>
</login-component>

I personally think that slots are not commonly used in project development, and are often used in the development of some UI libraries. If you want to have a deeper understanding of slots, you can refer to the official document cn.vuejs.org/v2/guide/co…

Filters

concept

Vue.js allows you to define your own filters, which can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter is supported since 2.1.0+). Filters should be added at the end of the JavaScript expression, indicated by the "|" symbol:

grammar

filter supports global filters or local filters

Global Filters

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

// Capitalize the first letter of the word 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'
    }
})

Local filter

<div id="app">
    <div v-for="(f,i) in friends" :key="i">
        <h3>Name: {{f.name}} </h2>
        <p>Age: {{f.age}}</p>
        <p>Gender: {{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 'male'
                }
                return 'female'
            }
        }
    })
</script>

Note: filter supports passing multiple parameters. The parameters passed directly to substr will be used as the second, third, and... parameters of the filter method in turn.

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

practise

Implement a filter that can return the time of the corresponding structure according to the specified template.

// Example <p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56

<p>{1599639292100 | getTemplateTimeByDate('YYYY-Md h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('YYYY year M month d day hh:mm')}</p> -> 2020 September 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]
                    // Determine whether the current template time is two digits or one digit // If it is a two-digit time, add zero in front, 1 -> 01 
                    // If it is a digit, no need to add zero if (RegExp.$1.length > 1) {

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

Summarize

This is the end of this article about slots and filters in Vue. For more relevant Vue slots and filters content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Introduction and use of slot in Vue
Detailed explanation of the use of Vue component slots and calling methods within components
Understanding and using vue slots
Detailed explanation of the principle and usage of Vue slots
$slot in vue gets the node instance of the slot
Detailed explanation of how to use vue slot
Vue.js must learn filters and custom filters every day
Vue filters and basic usage
Vue.js -- Summary of filter usage

<<: Detailed installation and configuration tutorial of MySQL 5.7 under Win10

>>: Detailed explanation of how Zabbix monitors the master-slave status of MySQL