Vue 之 slot 插槽简单使用

忘是亡心i 2021-12-21 03:25 289阅读 0赞

在`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:'查看详细'
          }
        }
      })
      
      
        <template id='panel-tpl'>
          <div class="panel">
              <div class="title">{
       {title}} </div>
              <div class="content"> {
       {content}}</div>
              <div class="bottom"> {
       {bottom}}</div>
            </div>
      </template>

长这模样.

![Image 1][]

15446899410400.jpg

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

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

Vue.component('img-panel',{
        template:'<div><img src="./md/img/1.jpg" width="200px" height="auto" ></div>',
      })
      
      <img-panel></img-panel>

它长这样.

![Image 1][]

15446900991371.jpg

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

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

我可能会这么写.

<template id='panel-tpl'>
          <div class="panel">
              <div class="title">{
       {title}} </div>
              <div class="content"><img-panel></img-panel></div>
              <div class="bottom"> {
       {bottom}}</div>
            </div>
      </template>

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

![Image 1][]

15446910436003.jpg

--------------------

**现在问题来了**

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

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

<template id='panel-tpl'>
          <div class="panel">
              <div class="title">{
       {title}} </div>
              
              
              <div class="content">{
       {content}}</div>
              <div class="bottom"> {
       {bottom}}</div>
            </div>
      </template>

--------------------

### slot 插槽 ###

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

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

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

<template id='panel-tpl'>
          <div class="panel">
              <div class="title">
                <slot name='title'>{
       {title}}</slot>
              </div>
              <div class="content">
                <slot name='content'>{
       {content}}</slot>
              </div>
              <div class="bottom">
                <slot name='bottom'> {
       {bottom}}</slot>
              </div>
            </div>
      </template>
      
      
      
      
      Vue.component('title-slot',{
        template:`<div style='backgroundColor:red;height:40px'></div>`
      })
    
      Vue.component('content-slot',{
        template:`<div style='background:yellow;height:100px;'></div>`
      })
      Vue.component('bottom-slot',{
        template:`<div style='background:black;height:40px'></div>`
      })

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

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

效果如下：

![Image 1][]

15446909419580.jpg

--------------------

**简单总结:**

*  在组件内部任意地方使用 `<slot name='value'></slot>` 标签挖坑.
 *  可以在其内部放置任意数据当成是默认值.`{ {title}} { {content}} { {bottom}}`
    
     *  挖坑语法(**组件定义**): `<slot name='slotname'>默认值</slot>`
     *  填坑语法(**组件使用**): `<div slot='slotname'>任意内容(字符串,数据,其他组件等)</div>` .. 注意,使用的使用是里用 `<div slot>` 而不是 `<slot>`
 *  最重要的是,我们可以利用`slot`,事先不建立组件和组件之间的依赖关系,完全利用 `slot` 这个`抽象层`,把坑挖好即可.

作者：Just\_relax  
链接：https://www.jianshu.com/p/c59985f7e3de  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Image 1]: