13、VUE组件中的slot插槽
2022-04-01 12:36:49 0 举报AI智能生成
登录查看完整内容
vue
作者其他创作
大纲/内容
双闭合调用组件，可以在组件的内部扩展其它的内容
我们可以在双闭合标签内在编写一些其它的内容，把这些内容作为组件的扩充内容
SLOT插槽的概念
<slot></slot>
可以让组件可以自定义扩展内容
预留插槽
定义
在 template 模版中预留插槽的位置：调用组件时，传进来的内容默认传递进该插槽中
基础操作
在模板中给预留的插槽设置名字
例
具名插槽指定内容的时候需要用TEMPLATE把内容包起来
剩余不指定的都是插入到默认的插槽中<slot>
v-slot:[name] 把模板中的内容放置到指定的命名插槽下
注意
具名插槽
在组件调用指定的插槽区域，所处作用域依然是外层公共作用域，而不是组件的私有组用域
<p>{{context}}</p> 现在这样是不行的
所以不能在插槽中直接用组件中私有的响应式数据
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
编译作用域
在插槽中想要拿到组件中的数据时，需要利用作用域插槽
作用域插槽
VUE 组件中的 slot 插槽
0 条评论
回复 删除
下一页
