酒店预订网站模板,专业网页制作地址,网站建设书籍附光盘,美的网站建设什么是插槽
插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时#xff0c;把不确定的、希望由用户指定的部分定义为插槽。 templatep这是MyCom1组件的第1个p标签/p#xff01;--通过slot标签#xff0c;为用户预留内容占位符…什么是插槽
插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时把不确定的、希望由用户指定的部分定义为插槽。 templatep这是MyCom1组件的第1个p标签/p--通过slot标签为用户预留内容占位符插槽--slot/slotp这是MyCom1组件最后一个p标签/p
/templatemy-com-1-在使用 MyCom1 组件时为插槽指定具体的内容--p~~~用户自定义的内容~~~/p
/my-com-1如果在封装组件时没有预留任何插槽则用户提供的任何自定义内容都会被丢弃。示例代码如下
templatep这是MyCom1组件的第1个p标签/p--封装组件时吗没有预留任何插槽--p这是MyCom1组件最后一个p标签/p
/templamy-com-1--自定义的内容会被丢弃--p~…-用户自定义的内容~~~/p
/my-com-1封装组件时可以为预留的插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何内容则后备内容会生效。示例代码如下
templatep这是MyCom1组件的第1个p标签/pslot这是后备内容/slotp这是MyCom1组件最后一个p标签/p
/template具名插槽
如果在封装组件时需要预留多个插槽节点则需要为每个插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下
div classcontainerheader--我们希望把页头放这里--slot nameheader/slot/headermain--我们希望把主要内容放这里--slot/slot/mainfooter--我们希望把页脚放这里--slot namefooter/slot/footer
/div注意没有指定 name 名称的插槽 会有隐含的名称叫做 “default”。
在向具名插槽提供内容的时候我们可以在一个元素上使用 v-slot 指令并以 v-slot 的参数的形式提供其名称。示例代码如下
my-com-2template v-slot:header
h1滕王阁序/h1/templatetemplate v-slot:defaultp豫章故郡洪都新府。/pp星分翼地按街庐。/pp襟三江而带五潮控蛮荆而引瓯越。/p/templatetemplate v-slot:footerp落款王勃/p/template
/my-com-2作用域插槽
在封装组件的过程中可以为预留的插槽绑定 props 数据这种带有 props 数据的叫做“作用域插槽”。示例代码如下
tbody!下面的slot是一个作用域插槽--slot v-foritem in list:useritem/slot
/tbody可以使用 v-slot: 的形式接收作用域插槽对外提供的数据。示例代码如下
my-com-3--1.接收作用域插槽对外提供的数据--template v-slot:defaultscopetr --2.使用作用域插槽的数据-- td{{scope}}/td /tr/template
/my-com-3解构插槽 Prop
作用域插槽对外提供的数据对象可以使用解构赋值简化数据的接收过程。示例代码如下
my-com-3--v-slot可以简写成#----作用域插槽对外提供的数据对象可以通过“解构赋值”简化接收的过程--template #default{user}trtd{{user.id}}/tdtd{{user.name}}/tdtd{{user.state}}/td/tr/template
/my-com-3
