当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢？
非常简单，只要给slot元素一个name属性即可
<slot name='myslot'></slot>
我们来给出一个案例：
这里我们先不对导航组件做非常复杂的封装，先了解具名插槽的用法。
当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢？
非常简单，只要给slot元素一个name属性即可
<slot name='myslot'></slot>
我们来给出一个案例：
这里我们先不对导航组件做非常复杂的封装，先了解具名插槽的用法。
基础知识 【Vue】组件 - 插槽的基本用法 【Vue】组件 - 多个插槽 子组件里，在 里写上默认的内容。 在父...
插槽用法：子组件header固定；父组件outside插槽header/index.vue outside/ind...
vue进阶用法 特征一：模板化 插槽 默认插槽 组件外部维护参数以及结构，内部安排位置 具名插槽 以name标识插...
摘要： 理解Vue插槽。 作者：前端小智 原文：vue 2.6 中 slot 的新用法 Fundebug经授权转载...
什么是插槽？ 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代...
插槽的作用：可以让用户在组件标签中自定义内容 # 插槽 ## 普通插槽 ```javascript const c...
当子组件的功能复杂时，子组件的插槽可能并非是一个。 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左...
Vue组件化开发 组件化开发的思想 组件的注册 组件间的数据交互 组件插槽的用法 Vue调试工具的用法 组件开发思...
用法类似于ViewChild，获取投影中的组件、指令和dom元素，类似于vue中的具名插槽和匿名插槽 调用Shad...
准备知识：【Vue】组件 - 插槽的基本用法 插槽除了有上面这种玩法之外，还可以通过关键字来指定。 在父级调用子组...
本文标题：vue的插槽用法
本文链接：https://www.haomeiwen.com/subject/lgpzmltx.html
网友评论