登录免费注册

首页  思维导图  详情



 



13、VUE组件中的slot插槽

13、VUE组件中的slot插槽

2022-04-01 12:36:49   0  举报





AI智能生成

vue

前端开发

vue

插槽

金色小芝麻

模板推荐

作者其他创作

大纲/内容

定义

双闭合调用组件，可以在组件的内部扩展其它的内容

SLOT插槽的概念

我们可以在双闭合标签内在编写一些其它的内容，把这些内容作为组件的扩充内容

预留插槽

<slot></slot>

可以让组件可以自定义扩展内容

基础操作

<b><font color="#c41230">在 template 模版中预留插槽的位置：调用组件时，传进来的内容默认传递进该插槽中</font></b><br>

具名插槽

定义

在模板中给预留的插槽设置名字

例

<br>

<br>

注意

具名插槽指定内容的时候<b><font color="#c41230">需要用TEMPLATE把内容包起来</font></b>

v-slot:[name] 把模板中的内容放置到指定的命名插槽下

剩余不指定的都是插入到默认的插槽中<slot>

作用域插槽

编译作用域

在组件调用指定的插槽区域，所处作用域依然是外层公共作用域，而不是组件的私有组用域

所以不能在插槽中直接用组件中私有的响应式数据

例

<p>{{context}}</p> 现在这样是不行的

注意

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

定义

在插槽中想要拿到组件中的数据时，需要利用作用域插槽

例

<br>

<br>

 Collect

Get Started

lab13 1000

 Collect

Get Started

L13

 Collect

Get Started

13座城市的最佳路线

 Collect

Get Started

Vue组件化流程













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document