我们经常会有封装组件的需求, 组件需要的往往不只有数据, 有时候我们要给一个模块做内容方面的可自定义, 比如我封装了一个黑板, 但是我有时希望上面是字, 又有时希望上面是图画, 这就要用到插槽了.
感谢你浪费一分钟生命读完了这段废话.
就是普通插槽, 也叫默认插槽.
只要你在子组件里写一个< slot></ slot>就可以从父组件向内部填充了.
虽然简单但是不写slot也是不能直接从父组件插内容的.
子组件:
父组件:
缺点就是不能规定父组件填充内容所指向的插槽, 父组件内填充的所有内容, 会填充到每个子组件内的插槽中:
子组件:
父组件:
特点是带有name属性:
有时我们会需要在子组件某处写一堆的插槽,又需要在父组件各处分别使用这些插槽.
某些方面计算机是很笨的,它不会看得出哪个插槽该填什么东西,也不知道你在这里填的东西是要给哪个插槽, 你得告诉她该怎么做.
只要有使用多个插槽的需求, 那就用具名插槽吧.
先来看看子组件:
v-slot:可以简写为"#"
这样所有在template包裹下的填充内容都会被填入对应的插槽,但如果没有被template包裹呢?
那样就相当于写了个这:
Vue官方文档: 没有被包裹在带有 v-slot: 的 < template> 中的内容都会被视为默认插槽内容.
从 2.6.0 开始，可以用方括号括起来的JS表达式作为一个指令(v-bind啥的)的参数,比如在此例中
其实这个东西最常见的是在封装组件时, 我们用computed里的方法返回值来控制:class和:style:
在2.6版本新增的内容中, 这种用法(动态指令参数)也可以用在具名插槽上定义动态的插槽名, 这其实是具名插槽的扩展用法, 你可以先看看具名插槽.
父组件内需要访问子组件中的数据以正常工作, 可以作用域插槽.
作用域插槽的渲染是在子组件完成, 所以我们也需要子组件的数据.
在子组件的slot上利用v-bind / v-for之类绑定上父组件需要的各种数据, 渲染时就可以从子组件拿数据来渲染.
绑定在 < slot> 上的属性被Vue官方称为"slotProps"(这并不重要);
子组件:
在父组件内使用v-slot属性接收子组件数据;
父组件
作用域插槽会被解析为一个传入了slotProps作参的函数:
所以, 父组件中v-slot: 的值实际上可以是任何 [能作为函数的参数来传入] 的东西;
我现在二次封装一个el-tabs, 实现传入数据数组自动生成:
子组件:
这样我们有三个标签页了:
父组件:
为了根据不同标签页显示不同的内容, 这里我们要拿到tab标签页的id, 来决定 “在id为几的标签页显示article_content的哪个子数组”
就可以正常呈现了:
注意 v-slot 只能添加在 < template> 上, 不然会标红;
（现在是22年4月22, 我刚做完我的个人网站, 回来说一句, 不封装实在是——太乱了代码很多，就算复制粘贴下来到别处还要改属性改参数改样式，主要是还要改样式，老天！做了三个页面我就开始封装了。）
到此这篇关于Vue3插槽(slot)使用方法的文章就介绍到这了,更多相关Vue3插槽使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
到此这篇vue插槽使用（vue3.0 插槽）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/22833.html