在实际应用中，我们有时候会遇到“vue插槽和过滤器是什么意思，作用和用法是怎样”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“vue插槽和过滤器是什么意思，作用和用法是怎样”文章能帮助大家解决问题��

插槽

什么是插槽��

概念

Vue 实现了一套内容分发的 API，为组件提供了一�� <slot> 元素作为承载分发内容的出口��

简单来说就��<slot> 元素作为组件模板之中的内容分发插槽��<slot> 元素自身将被替换��

插槽内容

语法

首先先新建一个文件来书写我们的slot

// slot.vue

<template>
  <div>
    <div>
      <!--分发内容的内容会被承载到这个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>我是分发到slot的内��</h2>
    </slotCom>
  </div>
</template>

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

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

<style>
</style>

从效果图（下图）中我们可以看到h2标签的那句话已经被渲染在了页面上，标签位置也对应上了slot.vue文件中的标签

注意

如果 <SlotTest> �� template 中没有包含一�� <slot> 元素，则该组件对称标签内部的任何内容都会被抛弃��

编译作用��

当你想在一个插槽中使用数据时，例如��

<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，因为其 (指该插槽��) 内容��
      _传递给_ <navigation-link> 的而不��
      �� <navigation-link> 组件*内部*定义的��
  */
</navigation-link>

作为一条规则，请记住：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的��

后备内容

<slot> 元素内部可以设置后备内容,如果当前组件对称标签内部没有插入任何内容的话,组件最终会渲染后备内容。简单来说就是相当于插槽的默认值��
举例

// 一个按钮组件，设置后备内容为文字Submit
<button type="submit">
  <slot>Submit</slot>
</button>

// 当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时��
<submit-button></submit-button>

// 后备内容“Submit”将会被渲染��
<button type="submit">
  Submit
</button>

// 但是如果我们提供内容��
<submit-button>
  Save
</submit-button>

// 则这个提供的内容将会被渲染从而取代后备内容：
<button type="submit">
  Save
</button>

具名插槽

概念有时我们组件需要多个插槽。可以将不同的组件插入到不同插槽内部，实现方法是使用具名插槽，给组件中的<slot> 元素设置一个name属性。在向具名插槽提供内容的时候，我们可以在一�� <template> 元素上使�� v-slot 指令将对应的内容插入到指定的<slot> 元素��

语法

// 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>我是分发到slot的内��</h2>

        <template v-slot:user>    
            <!-- 这里所有的内容都会被插入到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 也有缩写，即把参数之前的所有内�� (v-slot:) 替换为字�� #。例�� v-slot:header 可以被重写为 #header

<login-component>
            <h2>我是分发到slot的内��</h2>

            <template #user>    
                这里所有的内容都会被插入到name="user" 插槽��
                <div>
                    123
                </div>
            </template>


            <template #psd>    
               <input type="password" placeholder="这个元素会被插入到name=psd 插槽��">
            </template>
</login-component>

我个人觉得插槽在项目开发中不太常用，常用于一些UI库的开发。如果想对插槽有更深的了解可以查阅官方文档cn.vuejs.org/v2/guide/co��

过滤��

概念

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达�� (后者从 2.1.0+ 开始支��)。过滤器应该被添加在 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支持传递多个参��,直接向substr传递的参数会依次作为filter方法的第二第��....个参��

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

练习

实现一个过滤器,能够将时间戳字符串按照指定的模板返回对应结构的时��

// ��

<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]
                    // 判断当前模板时间�� 两位 还是 一位的
                    // 如果是两�� 个位数时间需要前面加��, 1 -> 01 
                    // 如果是一�� 不用加零操作
                    if (RegExp.$1.length > 1) {

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

总结

这篇关于“vue插槽和过滤器是什么意思，作用和用法是怎样”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容��

猜你喜欢

• JS数组操作函数包括什么，用法是怎样��

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要整理了数组操作函数的相关问题，包括了元素删除、splice、slice、concat等等内容，下面一起来看一下，希望对大家有帮助��

• 怎样用JS实现简易的手机验证码输入框��

  这篇文章给大家分享的是用JS实现简易的手机验证码输入框的内容，也就是在四个输入框中填入对应四位验证，每个输入框仅可输入一个数字，输入提交显示验证码的功能。实现具体效果及代码如下，感兴趣的朋友可以参考��

• 如何理解TypeScript泛型参数，要点有什��

  目录泛型简介举��????举个????????泛型参数的默认值——函数重载泛型参数的默认值——正文参考泛型简介软件工程中，我们不仅要创建一致的定义良好�� API，同时也要考虑可重用性�� 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C# �� Java 这样的语言中，可以使用 ��

• uni-app样式如何使用，有哪些事项要注��

  这篇文章主要为大家介绍了uni-app中的样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• 怎么进行调试nodejs程序，操作和方法是什��

  如何调试nodejs程序？下面本篇文章给大家介绍一下nodejs调试debug的方法，希望对大家有所帮助��