当前位置:   article > 正文

Vue - 插槽的基本使用(笔记)_v-slot 临时变量

v-slot 临时变量

目标: 组件基础使用
        场景: 组件底座(基本)样式不变, 插入的标签不同
                 传入数据用props, 传入标签用插槽
        术语: 对组件分发不同标签的一种技术
                (重要)口诀:
                        1. 组件内, 使用slot占位
                        2. 父组件上, 使用子组件, 标签夹着的地方传入具体标签替换到slot上


目标: 插槽默认内容
        口诀: 在slot标签夹着的地方写入默认内容
        效果: 不给slot传入具体标签, 显示默认内容


目标: 具名插槽
        场景: 组件内遇到多个slot
        口诀:
                1. 在slot标签上加name属性别名
                2. 在使用组件时, 标签夹着地方用template配合v-slot:插槽名
        效果: 把template夹着的内容配合v-slot分发给对应名字的slot标签处


目标: 作用域插槽
        场景: 使用组件插槽时, 想使用组件内变量(绑定)
        口诀:
                1. 子组件内, slot上自定义属性和组件内要传出的值(变量)
                2. template身上v-slot="临时变量名"
        效果: 临时变量名就会收集对应slot身上所有属性和值

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/article/detail/85207
推荐阅读
相关标签
  

闽ICP备14008679号