网站开发选题申请理由,东莞网站建议,做网站免费的app是什么,文案素材网站v-slot用法简记用法示例匿名插槽与具名插槽插槽作用域组件使用插槽动态命名总结用法示例
vue2.6统一了插槽的语法v-slot
匿名插槽与具名插槽
在其他组件中使用child组件
childtemplate v-slot:slotNamehello world/template
/childchild组…
v-slot用法简记用法示例匿名插槽与具名插槽插槽作用域组件使用插槽动态命名总结用法示例
vue2.6统一了插槽的语法v-slot
匿名插槽与具名插槽
在其他组件中使用child组件
childtemplate v-slot:slotNamehello world/template
/childchild组件
divslot nameslotName/slot
/div上面是具名插槽的用法省略插槽名name属性或插槽名为default表示匿名插槽
插槽作用域
在其他组件中使用child组件
用法一常规用法slotProps为自定义作用域名
childtemplate v-slot:slotName“slotProps”hello worldspan{{ slotProps.user.firstName }}/span/template
/child用法二解构插槽Prop实际上就是ES6解构JSON可以使用:替换参数名
childtemplate v-slot:slotName“{ user, age:nianling }”hello worldspan{{ user.firstName }}/spanspan{{ nianling }}/span/template
/childchild组件定义时将需要使用的作用域数据绑定在slot即可:useruser :ageage
templatedivslot nameslotName :useruser :ageage/slot/div
/templatescript
export default {data () {return {user: {firstName: Cliff,lastName: Rhine},age: 24}}
}
/script组件使用插槽动态命名
v-slot:{dynamicSlotName}总结
vue2.6后插槽的用法简单得了很多也更加灵活通过上面的示例可以看出作用域插槽实际上就是在具名插槽的基础上进行赋值。
v-slot:插槽名
v-slot:插槽名作用域名
v-slot作用域名
