当前位置: 首页 > Web前端 > vue.js

Vue槽(slot)使用(容易理解)

时间:2023-04-01 00:19:49 vue.js

是因为在2.6.0中,具名槽和作用域槽引入了新的统一语法(即v-slot指令)。它取代了slot和slot-scope,现在网上都在说一些老版本。官方文档不太好理解,所以自己整理了一篇关于槽的使用的文章。Slot通俗的理解就是“占坑”,在组件模板中占据了很好的位置。使用component标签时,component标签中的内容会自动填坑(替换组件模板中的slot位置),可作为导出内容槽,承载分布式内容定义两个组件home.vue,test.vue然后在home.vue组件中引用test.vue组件槽可以包含普通文本//home.vueHelloWord//test.vue当组件渲染时,将被替换为HelloWord该插槽还可以包含任何模板代码,包括在IntroducetheFontAwesomeiconstyleinyourindex.html中的HTML。html,你可以直接使用里面的图标.vueHelloWordslot在里面添加其他组件//home.vueHelloWord如果不包含元素,则组件的开始和结束标记之间的任何内容都将被丢弃。在slots中使用dataslots可以访问和模板其他地方相同的实例属性(即相同的“作用域”),但是不能访问的作用域//home.vue//slot可以获取home组件中的内容Hello{{enhavo}}data(){return{enhavo:'word'}}//home.vue//这里获取不到名字,因为这个值传递给了Hello{{name}}规则:父模板中的所有内容都在父范围内编译;子模板中的一切一切都在子范围内编译。备份内容(默认内容)slot有时我们需要为slot设置一个特定的默认内容。当其他组件不给你内容时,会渲染默认内容//test.vue//在slot中设置默认内容在slot中提交使用test.vue直接在home.vue中如下://home.vue然后最后设置默认内容Submit会渲染如果我们提供内容怎么办?//home.vuebutton然后提供的内容将被渲染,而不是默认的内容namedslot有时我们需要在一个组件中使用多个插槽,那么怎么办呢?对于这种情况,元素有一个特殊的特性:name,可以用来定义额外的槽

这个时候,我们可以使用name属性
如果没有name属性,那么它的name默认为default当向命名插槽提供内容时,我们可以在

一段主要内容。

还有一段。

这里有一些联系方式info

现在解构插槽props,因为作用域插槽通过将插槽内容包含在采用单个参数的函数中在内部工作这意味着v-slot的值可以实际上是可以在函数定义中用作参数的任何JS表达式。所以它是这样写的:
{{slotProps.usertext.名字}}</test>
也可以这样写:
{{usertext.firstName}}
这样可以让模板更简洁,尤其是插槽提供多个道具时,也开启了道具重命名等其他可能性。例如,usertext可以重命名为person:
{{person.firstName}}
甚至可以定义fallbackcontent(默认内容),当slot没有值时可以使用,可以使用默认内容:
{{usertext.firstName}}
动态槽名(2.6.0新增)动态命令参数(需要自己理解)也可以用于v-slot,定义动态插槽名称:...命名插槽的缩写(新在2.6.0)和v-on和v-bind一样,v-slot也有一个缩写,即把参数(v-slot:)之前的所有内容替换为字符#。比如v-slot:header可以改写为#header:原来是这样写的:

这里可能是一个页面标题

一段主要内容。

还有一段。

这里是一些联系信息

现在可以这样写:

这里可能是一个页面标题

主要内容的一段。

还有一个。

这里是一些联系方式

注意:这个命令和其他命令一样,只能写当它有参数时如下形式错误:{{usertext.firstName}}如果要使用缩写,则必须始终将其替换为显式插槽名称:{{usertext.firstName}}其他示例插槽道具允许我们将插槽转换为可重用的模板,可以呈现不同的内容基础在输入道具上编辑。这在设计封装数据逻辑同时允许父组件自定义部分布局的可重用组件时最有用。例如,我们要实现一个组件,它是一个列表,包含布局和过滤逻辑:
    {{todo.text}}
我们可以把每个todo作为父组件的slot,通过父组件来控制它,然后将todo绑定为slotpropDefine:
    {{todo.text}}
现在当我们使用组件时,我们可以选择为todo定义一个不同的至于那些过时的插槽和插槽范围功能将不会在这里详细说明。如果你有兴趣了解更多,请参考官方文档