Vue 插槽 默认插槽 具名插槽 作用域插槽


Vue 插槽 默认插槽 具名插槽 作用域插槽

插槽的作用:
父组件向子组件的指定位置插入一段html. 也是一种组件间通信方式,适用于父传子

定义插槽内容:将内容写在组件标签体中
定义插槽默认内容: 将默认内容写在插槽标签体中
定义插槽内容展示位置:
默认插槽:在组件中将slot标签写你想要展示的位置
具名插槽:在组件标签体中给元素添加slot属性,值为对应插槽名; 在组件slot标签添加对应name属性即可
作用域插槽: 插槽的定义者给插槽的使用者传递数据。template+scope | slot+v-bind

案例:默认插槽

App.vue





TopHeader.vue




案例:具名插槽

app.vue





TopHeader.vue






作用域插槽

app.vue





ScopeSlot.vue






vue