2025年vue 具名插槽(vue具名插槽和匿名插槽)

vue 具名插槽(vue具名插槽和匿名插槽)子组件定义为 1 2 父组件像以下这样使用 navigation link 子组件 1 3 渲染出来的 HTML 将会是 需要多个插槽时 可以利用 元素的一个特殊的特性 2 1 base layout 子组件模板定义 2 2 1 父组件使用子组件 base layout 节点上使用 slot 特性 2 2 2 也可在内容外层套一个节点 base layout base layout navigation link

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



子组件定义为:

1.2父组件像以下这样使用<navigation-link>子组件:

1.3渲染出来的 HTML 将会是:

需要多个插槽时,可以利用 元素的一个特殊的特性:

2.1<base-layout>子组件模板定义:


讯享网

2.2.1父组件使用子组件<base-layout>,节点上使用slot特性:

2.2.2也可在内容外层套一个节点,并在外层节点上使用slot特性:

2.3渲染出来的 HTML 都将会是:

单个插槽和具名插槽中插槽上不绑定数据,所以父组件提供的模板既要包括样式又要包括数据,而作用域插槽是子组件提供数据,父组件只需要提供一套样式

3.1子组件:

3.2父组件:

3.3结果如图:

&nbsp;

匿名插槽和具名插槽详情见:https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽

作用域插槽详情见:https://segmentfault.com/a/77423

&nbsp;

小讯
上一篇 2025-04-25 17:30
下一篇 2025-04-29 21:02

相关推荐

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