Vue 之 slot 插槽简单使用

在Vue中定义组件,没什么大不了的. 我们可以定义一些组件.

比如 : 定义一个 panel 组件

Vue.component('panel',{
 template:'#panel-tpl',
 data() {
 return {
 title:'这是title',
 content:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus pariatur ea molestiae alias, illum sed porro neque unde repudiandae. A, perspiciatis vel inventore unde modi reiciendis esse quasi commodi minima!',
 bottom:'查看详细'
 }
 }
 })

 

长这模样.

15446899410400.jpg

在 Vue 中,一个组件内部可能会引用另外一个组件.也没什么大不了的.

比如,在定义一个图片组件.

Vue.component('img-panel',{
 template:'
',
 })

 

它长这样.

15446900991371.jpg

两个组件(panel & img-panel)都是全局组件.

我希望在 panel 组件里 div.content 里使用 img-panel 组件来填充.

我可能会这么写.

两个组件强耦合了在一起，长这样:

15446910436003.jpg

---

现在问题来了

panel 组件的 div.content 这个部分,我是希望用内容填充的. 而不想管内容是什么.

但是这里的代码,我把 img-panel 组件写死到里面去了. 如果后期要换的话,我就得修改这里的代码.

---

slot 插槽

slot 插槽可以在组件的内容预留一个位置.类似于 placeholder.

在需要的使用,把你需要的任何内容填充进去.

于是,我在 panel里放几个 slot ,只管挖坑,不管填坑(但设置了默认值)

 Vue.component('title-slot',{
 template:`
`
 })

 Vue.component('content-slot',{
 template:`
`
 })
 Vue.component('bottom-slot',{
 template:`
`
 })

然后在使用这个 panel 组件时,把需要的坑填进去.

注意:我这里修改的是panel组件使用的位置,而不是定义的位置.

效果如下：

15446909419580.jpg

---

简单总结:默认插槽和具名插槽

• 在组件内部任意地方使用 标签挖坑.

• 可以在其内部放置任意数据当成是默认值.{{title}} {{content}} {{bottom}}

  • 挖坑语法(组件定义): 默认值

  • 填坑语法(组件使用):

    任意内容(字符串,数据,其他组件等)
    .. 注意,使用的使用是里用
    而不是

• 最重要的是,我们可以利用slot,事先不建立组件和组件之间的依赖关系,完全利用 slot 这个抽象层,把坑挖好即可. 也就是说,子组件和父组件并不是强耦合的关系.

作用域插槽.

作用插槽的用法,不像前面那样纯粹. 前面两者如果仅仅是父组件挖坑,父组件在填坑.

对于作用于插槽来说,是子组件提供数据,父组件拿到数据(子组件向组件传递数据的另一种形式),然后在决定如何去展示.

父组件和子组件强耦合了在一起.

所以,你定义子的子组件需要向外传递数据,结构就是类似下面这种.

父组建事先也不需要挖坑.当用到的子组件是slot-scope时,拿到数据,决定如何渲染即可.