当前位置:网站首页 > Vue.js开发 > 正文

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



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


插槽内可以包含普通文本

 
   
 
   

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

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

 
   

插槽内添加其他组件

 
   

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

在插槽中使用数据

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

 
   
 
   

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

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

 
   

在里直接使用如下:

 
   

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

 
   

假如我们提供内容呢?

 
   

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

 
   

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

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

 
   

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

 
   
 
   

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

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

 
   

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

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

 
   

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

 
   

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

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

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

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

 
   

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

 
   

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

 
   

所以本来是这样写的:

 
   

还可以这样写:

 
   

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

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

 
   

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

 
   

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

 
   

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

原来是这样写的:

 
   

现在可以这样写:

 
   

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

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

 
   

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

 
   

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

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

 
   

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

 
   

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

 
   

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

拜拜

到此这篇vue插槽作用域(vue中插槽有什么用处)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • spss22.0授权码(spss26.0授权码)2025-09-24 13:36:07
  • ettercap下载和安装(ettercap 0.8.3.1教程)2025-09-24 13:36:07
  • ettercap打不开(ettercap 0.8.3.1教程)2025-09-24 13:36:07
  • vue安装脚手架失败(vue3脚手架安装)2025-09-24 13:36:07
  • ubuntu更新源命令出现错误(ubuntu12.04更新源)2025-09-24 13:36:07
  • vue安装脚手架步骤(vue3.0脚手架安装)2025-09-24 13:36:07
  • ubuntu16.04下载源(ubuntu下载源哪个最快)2025-09-24 13:36:07
  • jsjs是哪个地区的烟草(jy是哪个地方的烟草)2025-09-24 13:36:07
  • vue2生命周期有几个(vue各个生命周期的作用)2025-09-24 13:36:07
  • vue中插槽是什么(vue中插槽有什么用处)2025-09-24 13:36:07
  • 全屏图片