vue插槽作用域(vue中插槽有什么用处)

vue插槽作用域(vue中插槽有什么用处)因为在 2 6 0 中 具名插槽 和 作用域插槽 引入了一个新的统一的语法 即 指令 它取代了 和 并且现在网上都说的是一些老版本的内容 官方文档不太容易理解 所以就整理了一篇有关于插槽 slot 使用的文章 Slot 通俗的理解就是 占坑 在组件模板中占好了位置 当使用该组件标签时候 组件标签里面的内容就会自动填坑 替换组件模板中位置 并且可以作为承载分发内容的出口 定义两个组件

大家好,我是讯享网,很高兴认识大家。



因为在2.6.0中,具名插槽作用域插槽 引入了一个新的统一的语法 (即 指令)。它取代了 和 ,并且现在网上都说的是一些老版本的内容,官方文档不太容易理解,所以就整理了一篇有关于插槽(slot)使用的文章


插槽内可以包含普通文本

 

讯享网
讯享网

当组件渲染的时候,会被替换为

插槽内也可以包含任何模板代码,包括HTML

 

插槽内添加其他组件

讯享网

如果中没有包含一个元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。

在插槽中使用数据

插槽跟模板其他地方一样都可以访问相同的实例属性(也就是相同的"作用域"),而不能访问的作用域

 
讯享网

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

有时候我们需要给插槽设置一个具体的默认内容,当别的组件没有给你内容的时候,那么默认的内容就会被渲染

 

在里直接使用如下:

讯享网

那么最后设置的默认内容 Submit 将会被渲染

 

假如我们提供内容呢?

讯享网

那么这个提供的内容将会替代默认的内容被渲染出来

 

有时候我们一个组件里需要多个插槽


讯享网

那么怎么办呢? 对于这样的情况,元素有一个特殊的特性: ,这个特性可以用来定义额外的插槽

讯享网

这时候,我们就可以使用属性

 
讯享网

现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 的 中的内容都会被视为默认插槽的内容。

如果你希望更明确一点的话,那就把主体内容那个插槽里设置,然后把上面的内容包裹起来

 

注:只能添加在一个上,(只有一种例外情况,下面会说)

上面已经说了,插槽跟模板其他地方一样都可以访问相同的实例属性(也就是相同的"作用域"),而不能访问的作用域

讯享网

然后在中接收传过来的值:

 

这样就可以获得组件传过来的值了

绑定在 元素上的特性被称为插槽 。在父组件中,我们可以用 设置一个值来定义我们提供的插槽 prop 的名字,然后直接使用就好了

在上述情况下,当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 直接用在组件上

这样写法还可以更简单,因为不带参数的就被假定为默认插槽,所以上面的代码还可以简化:

讯享网

注: 默认插槽 的缩写语法不能和 具名插槽 混用,因为它会导致作用域不明确

 

只要出现多个插槽,始终要为所有的插槽使用完整的基于的语法:

讯享网

所以本来是这样写的:

 

还可以这样写:

讯享网

这样可以使模板更简洁,尤其是在该插槽提供了多个 的时候。它同样开启了 重命名等其它可能,

例如可以将 usertext 重命名为 person:

 

甚至可以定义 后备内容(默认内容),用于插槽没有值时可以使用默认内容的情形:

讯享网

动态指令参数(需要自己了解)也可以用在上,来定义动态的插槽名:

 

跟 和 一样, 也有缩写,即把参数之前的所有内容 替换为字符 。例如 可以被重写为 :

原来是这样写的:

讯享网

现在可以这样写:

 

注:该指令和其他指令一样,只在其有参数的时候才可用

下面的书写形式是错误的:

讯享网

如果希望使用缩写的话,必须始终以明确插槽名取而代之

 

插槽 prop 允许我们将插槽转换为可复用的模板,这些模板可以基于输入的 prop 渲染出不同的内容。 这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。

例如,我们要实现一个 组件,它是一个列表且包含布局和过滤逻辑:

讯享网

我们可以将每个 作为父级组件的插槽,以此通过父级组件对其进行控制,然后将 作为一个插槽 进行绑定:

 

现在当我们使用 组件的时候,我们可以选择为 todo 定义一个不一样的 作为替代方案,并且可以从子组件获取数据:

讯享网

至于那些废弃了的 和 特性,这里就不在阐述了,如果有兴趣了解的话,请参考官方文档

拜拜

小讯
上一篇 2025-06-13 20:13
下一篇 2025-04-29 18:27

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/202388.html