原始地址:https://segmentfault.com/a/1190000012996217
插槽:slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由 父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示。
显不显示和怎样能够显示由父组决定
非插槽模板指的是html模板,指的是‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由插件自身控制;
插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。
自己的话讲:非插槽模板,自己决定自己显示,插槽:父级决定子级显示;
一,单个插槽:没有name属性。一个组件只能用一次,slot 没有name又叫匿名插槽。
匿名插槽,子组件被引入父组件的时候,被父组件使用了,子组件需要一个<slot/>来占位,有名字的占位,叫具名插槽
例如:子组件:<slot></slot>
父组件:<chlid>
<div>999999</div> //div的内容代替了子组件的匿名插槽 【父组件<div>999999</div> ===子组件<slot></slot>】
</child>
自己话说:<slot></slot>在子组件中,在父组件中的子组件中显示,但仍然属于子组件。单纯的占个位置slot
二,具名插槽:有name属性,一个页面你可以使用多次,只要名字不同就行了,slot 加了name属性,就叫具名插槽;
父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。
父组件:<div slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
</div>
子组件: <slot name='up'></slot>
作用域插槽:子组件通过属性<slot :自定义属性名=‘值’></slot>,将自己内部的原始类型给到父组件;
父组件<template slote-scope='自定义接收'></template> 共同点是由slot这个单词
子组件 slot 除了要占个位置还要传递参数,父组件slote-scope负责接收参数。