Vue 插槽 默认插槽 具名插槽 作用域插槽
Vue 插槽 默认插槽 具名插槽 作用域插槽
插槽的作用:
父组件向子组件的指定位置插入一段html. 也是一种组件间通信方式,适用于父传子
定义插槽内容:将内容写在组件标签体中
定义插槽默认内容: 将默认内容写在插槽标签体中
定义插槽内容展示位置:
默认插槽:在组件中将slot标签写你想要展示的位置
具名插槽:在组件标签体中给元素添加slot属性,值为对应插槽名; 在组件slot标签添加对应name属性即可
作用域插槽: 插槽的定义者给插槽的使用者传递数据。template+scope | slot+v-bind
案例:默认插槽
App.vue
TopHeader.vue
默认插槽,插槽没有内容时随便展示点什么。。。。
案例:具名插槽
app.vue
footer content
header content
TopHeader.vue
头部
默认插槽,插槽没有内容时随便展示点什么。。。。
默认插槽
插槽没有内容时随便展示点什么。。。。
作用域插槽
app.vue
-
{{item}}
ScopeSlot.vue