当前位置：首页 > Web前端 > HTML

Vue槽详解-什么是插槽？

时间：2023-04-02 17:02:56 HTML

作者|来源|DadaFrontEndBistro什么是插槽？slot的命令是v-slot，目前替代了slot和slot-scope，slotcontent，以及一套vue实例的内容分发API，使用slot元素作为承载和分发内容的出口。组件写法：dada使用组件模板，可以在里面写：将替换任何可以写入dada槽的模板代码：dadadada//添加图标组件如果我的-link不包含插槽元素，则其间的任何内容都将消失。什么是插槽？是vue提出的一个概念。插槽用于决定将其携带的内容插入指定的位置，使模块分块，具有模块化的特点。如何使用插槽？//父组件在父组件中引用子组件，写入想要显示的内容子组件slotda在子组件中写槽，位置是父组件要显示的内容//父组件子组件命名插槽子组件父组件我是页脚

Slot默认内容//父组件子组件作用域子组件slot可以是任何内容：slot是Vue实现的一套内容分发API，使用元素作为承载分发内容的出口如果没有插槽，组件标签中的某些内容将不起作用。当我在组件中声明slot元素的时候，组件元素里面写的内容就会跑到它上面去！

Vue.component('child-component',{template:`

Hello,World!

`})letvm=newVue({el:'#app',data:{}})Hello组件之间的内容不显示，使用显示它的插槽，看如何使用：Vue.component('child-component',{template:`

Hello,World!

`})namedinsert插槽就是给slot起个名字，slot属性对应的内容会和组件中的name一一对应。child-component，如果没有名称，则默认。

shopping,shopping帅

我是人，我是默认的

作用域槽，组件的属性，可以在组件元素内部使用！在模板元素

　　　　　　{{a}}

Vue.component('child',{template:`

`})

{{a}}Vue.component('child',{props:['lists'],template:`

`})在组件中使用标签，是定义一个插槽。如果组件不包含，则传入的任何内容都将被丢弃。

d

dd.

dd.

ddd

H

A.

A.

H

会在没有指定slot属性时放置在slot中在名称属性的插槽中。compilationscopeslot中的内容无法访问父scopeLoggedinas{{user.name}}//部分无法访问url父组件templateEverything在父级范围内编译；子组件模板中的所有内容都在子范围内编译。

{{todo.text}}

合成组件：

YourProfile那么你可以在的模板中这样写：Vue.component('navigation-link',{模板：``});当组件呈现时，元素将替换为“您的个人资料”。插槽可以包含任何模板代码>navigation-link>也可以是一个组件：

YourProfile

但如果导航链接中没有包含插槽元素，则其间的所有内容都将消失。命名插槽需要多个插槽

scopeslotVue.component('todo-list',{模板:`

{{todo.text}}

`});

{{todo.text}}

看完代码，slot的内容基本明白了。对于compilationscope:Loggedinas{{user.name}}这个slot可以访问到和template其他地方一样的实例属性，即相同“范围”，但无法访问导航链接标签的范围。点击此处将带您前往：{{url}}我明白了。后备内容提交

提交scopeslot{{user.lastName}}{{user.firstName}}然而，上面的代码将无法正常工作，因为只有组件可以访问用户，而我们提供的内容是在父组件中呈现的。

{{user.lastName}}

绑定到元素的属性称为slotprop

{{slotProps.user.firstName}}

{{slotProps.user.firstName}}{{slotProps.user.firstName}}默认插槽的缩写语法不能与namedslot

{{slotProps.user.firstName}}slotPropsisNOT此处可用如何编写多个插槽：

{{slotProps.user.firstName}}...

解构插槽Propfunction(slotProps){//插槽内容}<current-userv-slot="{user}">{{user.firstName}}{{person.firstName}}动态槽名

...

??别忘了留下你的足迹【点赞+收藏+评论】作者信息：【作者】：Jeskson【原创公众号】：达达前端小酒馆【福利】：公众号回复“资讯”送自学资料大礼包（进群即可分享，随便你说哈，看看我有没有）！【转载说明】：转载请注明出处，谢谢合作！~大前端开发，定位前端开发技术栈博客，PHP背景知识点，web全栈技术领域，数据结构与算法，网络原理等以通俗易懂的方式呈现给小伙伴方式。感谢您的支持，感谢您的厚爱！！！如本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改，我们会尽快处理。请喜欢它！因为您的认可/鼓励是我写作最大的动力！欢迎来到达达的CSDN！这是一个有品质有态度的博客

上一篇：前端面试日常3+1——Day114

下一篇：Hexo结合Stun静态博客从入门到入门搭建

Vue槽详解-什么是插槽？相关文章

最新推荐

猜你喜欢