Vue slot插槽的使用和个人理解 | 8月更文挑战

331 阅读2分钟
  • 在vue中,引入的子组件标签中间是不允许写内容的。为了解决这个问题,官方引入了插槽(slot)的概念。

  • 插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。

插槽分为匿名插槽具名插槽以及作用域插槽

  1. 匿名插槽

我们又可以叫它单个插槽或者默认插槽。与具名插槽相对,它不需要设置name属性。(它隐藏的name属性为default。)

匿名插槽组件中的引用:

<show-cont>
  aaa
</test-man>

组件中匿名插槽的使用:

Vue.component('show-cont', {
    template:`
      <slot>
      </slot>
    `
  })

如上例,slot标签未设置name属性,所以show-cont组件引用时标签内的文字默认指向到组件中唯一的solt

  1. 具名插槽

插槽有一个name属性。与匿名插槽相对,加了name属性的匿名插槽就是具名插槽 匿名插槽组件中的引用:

<show-cont>
  <template v-slot:aa>
    <span>这是第二个插槽的内容</span>
  </template>
  <template v-slot:bb>
    <span>这是第一个插槽的内容</span>
  </template>
</show-cont>

组件中匿名插槽的使用:

Vue.component('show-cont', {
    data(){
      return {
      }
    },
    template:`
    <div>
      <slot name="aa">
      </slot>
      <slot name="bb">
      </slot>
    </div>
    `
  })
  1. 作用域插槽

这类插槽可以让父组件使用子组件的数据,只需子组件在插槽中用v-bind绑定自身的数据,然后父组件在使用组件时就可以用v-slot="slotProps"接收, 注意:这里的slotProps可以自定义。

<show-cont v-slot="props">
      <v-btn >{{props.person.name}}</v-btn>
</show-cont>

组件中匿名插槽的使用:

Vue.component('show-cont', {
    data(){
      return {
          person: {
              name: 'wang123'
          }
      }
    },
    template:`
      <div>
          <slot v-bind:person="person">
          </slot>
      </div>
    `
  })

另外

solt标签中依然可以书写别的内容作为slot的默认值,如果组件引用时并未给slot重新赋值的话,则会使用默认值,若赋值则会覆盖默认值。 如下例:

匿名插槽组件中的引用:

<show-cont>
  aaa
</test-man>

组件中匿名插槽的使用:

Vue.component('show-cont', {
    template:`
    <div>
      <slot>
      bbb
      </slot>
    </div>
    `
  })

这样组件显示为结果为:aaa

//bbb为默认值,aaa覆盖默认值显示