海口建站模板厂家,青岛招聘信息最新招聘信息,网站免费申请空间,展示用网站模板前言#xff1a; vue中关于插槽的文档说明很短#xff0c;语言又写的很凝练#xff0c;再加上其和methods#xff0c;data#xff0c;computed等常用选项在使用频率、使用先后上的差别#xff0c;这就有可能造成初次接触插槽的开发者容易产生“算了吧#xff0c;回头再学…前言 vue中关于插槽的文档说明很短语言又写的很凝练再加上其和methodsdatacomputed等常用选项在使用频率、使用先后上的差别这就有可能造成初次接触插槽的开发者容易产生“算了吧回头再学反正已经可以写基础组件了”的想法于是就关闭了vue的说明文档。 实际上插槽的概念很简单下面通过分三部分来讲。这三部分也是按照vue说明文档的顺序来写的。 进入这三部分之前先让还没接触过插槽的同学对什么是插槽有一个简单的概念插槽也就是slot是组件的一块HTML模板这块模板显示不显示、以及怎样显示由父组件来决定。 实际上一个slot最核心的两个问题在这里就点出来了是显示不显示和怎样显示。 由于插槽是一块模板所以对于任何一个组件从模板种类的角度来分其实都可以分为非插槽模板和插槽模板两大类。 非插槽模板指的是html模板比如‘div、span、ul、table’这些非插槽模板的显示与隐藏以及怎样显示由组件自身控制插槽模板是slot它是一个空壳子因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定slot写在组件template的什么位置父组件传过来的模板将来就显示在什么位置。 一、理解vue中的slot 官网上对slot的理解是 “Vue实现了一套内容分发的API这套API基于当前的Web Components规范草案将slot元素作为承载分发内容的接口”。 在参考了很多资料之后以下总结一下我对slot的理解: slot的意思是插槽Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。 在我们的电脑主板上也有各种各样的插槽有插CPU的有插显卡的有插内存的有插硬盘的。我们可以理解slot为要占出当前的位置方便我们插入内容。或者可以这样理解要去吃饭了儿子先去占座然后等他爸爸来了再一起吃。 Vue的插槽分为匿名插槽单个插槽/默认插槽、具名插槽、作用域插槽带数据的插槽。 ####匿名插槽单个插槽/默认插槽 无name属性在组件中只可以使用一次父组件提供样式和内容 !-- 父组件--
templatediv classfatherh3这里是父组件/h3chliddiv classtmp1spanLeaf 1/spanspanLeaf 2/spanspanLeaf 3/spanspanLeaf 4/spanspanLeaf 5/span/div/child/div
/template
script
import Child from /components/child
export default {components:{child:child}
}
/script
style
.tmp1 span{width: 50px;height: 50px;border: 1px solid black;
}
/style
复制代码 !--子组件--
templatedivslot/sloth2child子组件部分/h2/div
/template
复制代码 最终呈现效果 如果改变子组件中的位置 templatedivh2child子组件部分/h2slot/slot/div
/template
复制代码 改变slot位置后的最终呈现效果如下 只有在父组件的child下写了html模板才能在子组件指定的位置放父组件的内容。插槽最后显示不显示是看父组件有没有在child下写模板像下面一样 childhtml模板
/child
复制代码 ####具名插槽 有name属性在组件中可以使用N次父组件通过html模板上的slot属性关联具名插槽没有slot属性的html模板默认关联匿名模板父组件提供样式和内容 !--父组件--
templatediv classfatherh3这里是父组件/h3chliddiv classtmp1 slotupspanLeaf 1/spanspanLeaf 2/spanspanLeaf 3/spanspanLeaf 4/spanspanLeaf 5/span/divdiv classtmp1 slotdown spanLeaf 6/span spanLeaf 7/span spanLeaf 8/span spanLeaf 9/span spanLeaf 10/span /div /child /div /template script import Child from /components/child export default { components:{ child:child } } /script style .tmp1 span{ width: 50px; height: 50px; border: 1px solid black; } /style 复制代码 !--子组件--
templatedivslot nameup/sloth2chlid子组件部分/h2slot namedown/slot/div
/template
复制代码 最终呈现效果 ####作用域插槽带数据的插槽 父组件只提供样式子组件提供内容在slot上面绑定数据子组件的值可以传给父组件使用父组件展示子组件数据有3种方式flex显示、列表显示、直接显示使用slot-scope必须使用templatescope返回的值是slot标签上返回的所有属性值并且是一个对象的形式保存起来slot有两个属性一个row,另一个是index!--父组件--
templatediv classfatherh3这里是父组件/h3chlid!-- 第一次使用用flex展示数据 --template slot-scopeuserdiv classtmp1span v-for(item,index) in user.data :keyindex{{item}}/span /div /template !-- 第二次使用用列表展示数据 -- template slot-scopeuser ul li v-for(item,index) in user.data :keyindex{{item}}/li /ul /template !-- 第三次使用直接显示 -- template slot-scopeuser {{user.data}} /template /child /div /template script import Child from /components/child export default { components:{ child:child } } /script style .tmp1 span{ width: 50px; height: 50px; border: 1px solid black; } /style 复制代码 !--子组件--
templatedivh2chlid子组件部分/h2slot :datadata/slot/div
/template
script
export default {props: [message],data () { return { data: [小庄,CC,小张,小林,Leaf,Bob] } } } /script 复制代码 通过3种方式显示数据的最终呈现效果分别如下 1、flex显示 2、列表显示 3、直接显示 这里我们所看到的数据“小庄,CC,小张,小林,Leaf,Bob”都是子组件data提供的数据,父组件如果要使用这些数据必须要通过template模板结合slot-scope来呈现。 这里只是将自己学到的知识做一个总结方便自己记忆和查阅可能会有错望大神指点 作者Leaf_hyc链接https://juejin.im/post/5c83aa1b5188257ddb6af526来源掘金著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。 转载于:https://www.cnblogs.com/ning123/p/11146134.html
