西安哪家做网站最好,wordpress 数据库中的表,温州网站建设方案案例设计,手机网站设计公司可去亿企邦什么是插槽
slot 【插槽】#xff0c; 是 Vue 的内容分发机制#xff0c; 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot 是子组件的一个模板标签元素#xff0c; 而这一个标签元素是否显示#xff0c; 以及怎么显示是由父组件决定的。
VUE中slot【插槽】…什么是插槽
slot 【插槽】 是 Vue 的内容分发机制 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot 是子组件的一个模板标签元素 而这一个标签元素是否显示 以及怎么显示是由父组件决定的。
VUE中slot【插槽】的分类与应用
插槽有三种默认插槽、具名插槽、作用域插槽。
1默认插槽
语法slot/slot
示例
在子组件中定义一个默认插槽
templatedivh2{{ title }}/h2slot/slot/div
/template
在开发中我们经常使用到组件之间的传值但很多情况涉及到的都是数据属性的传值现在如果是这种情况想让父组件定义的 p 标签传给子组件并显示可以在子组件中定义一个默认插槽
templatediv classabouth1This is an Parent page/h1children!-- 一个p标签的dom结构 --p子组件标签之间/p/children/div
/templatescript
import Children from ./Children.vue
export default {components: {Children},data () {return {}}
}
/script展示效果 2具名卡槽
在子组件中定义插槽时给对应的插槽分别起个名字方便后边插入父组件将根据 name 来填充对应的内容。这种有name属性的卡槽就是具名卡槽。
为具名插槽提供内容
在向具名插槽提供内容的时候我们可以在一个 template 元素上使用 v-slot 指令并以 v-slot 的参数的形式指定元素需要放在哪个插槽中。
【语法】template v-slot:插槽的name 需要向插槽中放入的内容 /template
具名插槽的简写形式
跟 v-on 和 v-bind 一样v-slot 也有缩写即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header
【语法】template #插槽的name 需要向插槽中放入的内容 /template
【注】
使用 v-slot 指令指定元素放在哪个插槽中必须配合template 元素且一个template 元素只能对应一个预留的插槽即不能多个template 元素都使用 v-slot 指令指定相同的插槽。在 2.6.0 中我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。使用 slot 属性指定元素放置的插槽slot插槽的nameslot 属性可以直接写在元素标签上即 slot 属性不用必须与template 元素配合且不同的标签可以使用 slot 属性指定相同的插槽使用 slot 属性指定了相同的插槽都会被放入一个插槽中后面的元素会被追加在前面放入插槽的元素后。
示例
在子组件中定义两个具名插槽
templatedivh3Com 组件/h3slot nameheader/slotslot namebottom/slot/div
/templatescript
export default {name: Com
}
/script父组件示例代码
templatedivh1App 组件/h1Com!-- 指定需要向子组件的插槽区域放入的元素 --!-- 需要放入插槽的元素写在组件标签内 --!-- div插槽的内容/div --template v-slot:headerdiv头部区域/div/templatetemplate v-slot:defaultdiv默认区域/div/templatetemplate v-slot:bottomdivbottom区域/div/template/Com/div
/template
script
import Com from ./Com.vue
export default {name: App,components: { Com }
}
/script
3作用域插槽
在封装组件的过程中可以为预留的slot 插槽绑定 props 数据这种带有 props 数据的slot 叫做“作用域插槽”。
作用域插槽要显示的数据已经在组件中以什么样的样式显示数据(用什么标签和标签的样式)可以由组件的使用者进行指定
【语法】slot :自定义的namedata中的属性或对象/slot
注为作用域插槽指定插槽内的元素必须使用 template 标签。
获取插槽绑定 props 数据的方法1.scope接收的变量名template scope接收的变量名2.slot-scope接收的变量名template slot-scope接收的变量名3.v-slot:插槽名接收的变量名template v-slot:插槽名接收的变量名
子组件示例
templatedivh3Com 组件/h3!-- 为组件的使用者预留的区域 --!-- :infomationinfo 未来要进行渲染在插槽位置的数据 --!-- 怎么样渲染数据由组件的使用者决定 --slot :infomationinfo :msgmsg/slot/div
/templatescript
export default {name: Com,data() {return {info: { name: zs, age: 23 },msg: hello vue}}
}
/script
父组件示例
templatedivh1App 组件/h1Com!-- 指定需要向子组件的插槽区域放入的元素 --!-- 需要放入插槽的元素写在组件标签内 --!-- val 接收组件中要在插槽位置渲染的数据 --!-- val 组件通过 props 向插槽中传入的数据 --template #defaultval {{ val }} /template/Com/div
/templatescript
import Com from ./Com.vueexport default {name: App,components: { Com }
}
/script
此文章借鉴了一下博主的优秀文章
原文链接
