vue中的插槽（slot ）及 过滤器（filters）

slot 是什么

• slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽（slot）是子组件的一个模板标签元素
• 而这个元素是否显示 以及怎么显示是由父组件决定的

默认插槽

• 默认插槽又叫 匿名插槽 当slot没有指定 name 属性的时候一个默认显示插槽 一个组件内只有一个匿名插槽

具名插槽

• 带有具体名字的插槽 也就是带有name属性的 slot 一个组件可以出现多个具名插槽

作用域插槽

• 默认插槽 具有插槽的一个变体 可以是匿名插槽 也可以是具名插槽 该插槽的不同点是在子组件渲染作用域插槽时 可以将子组件内部的数据传递给父组件
• 让父组件根据子组件传递过来的数据觉得如何渲染该插槽

slot 实现原理

• 当子组件 VM 实例化时 获取到父组件传入的 slot 标签的内容 存放在 vm.$slot中默认插槽为vm.$slot.default 具名插槽为
• vm.$slot.xxx xxx为插槽名 当组件执行渲染函数时候 遇到 solt 标签 使用 $slot 中的内容进行替换 此时可以为插槽传递数据 若存在数据 则可称该插槽为作用域插槽

过滤器（filters）的作用

• 根据过滤器的名称 过滤器时用来过滤数据的 在 Vue 中使用 filters ；哎过滤数据 filters 不会修改数据 而是过滤数据 改变用户看到的输出（计算属性 computed 方法 methods 都是通过修改数据来处理数据格式的输出显示）

过滤器（filters）使用场景

• 需要格式化数据的情况 比如需要处理时间 价格等数据格式的 输出 / 显示 比如 后端返回一个年月日的日期字符串 前端要展示为多少天的数据格式 此时就可以用 filters 过滤器来处理数据

过滤器（filters）使用

• 过滤器是一个函数 它会把表达式中的值始终当做第一个函数的第一个参数 过滤器用在插槽表达式 {{}} 和 v-bind 中 然后放在操作符 | 后面进行指示