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

长这模样.

15446899410400.jpg

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

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

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

它长这样.

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>

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

15446910436003.jpg

---

现在问题来了

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> -->
          <!-- 不要 img-panel 了,还是显示自己的数据属性叭!!!! -->
          <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 组件时,把需要的坑填进去.

<div id='app'>
   <panel>
    <div slot='title'><title-slot></title-slot></div>
    <div slot='content'><content-slot></content-slot></div>
    <div slot='bottom'><bottom-slot></bottom-slot></div>
   </panel>
  </div>

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

效果如下：

15446909419580.jpg

---

简单总结:

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