vue中插槽有哪些用法

vue中<slot></slot>标签代表插槽

一、内容插槽

顾名思义，插槽的作用就是存放内容

html代码如下：

<test-man>
      <v-card dark>
        is handsome
      </v-card>
</test-man>

javascript代码如下：

Vue.component('test-man', {
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot>
      </slot>
    </v-card>
    `
  })

效果如下：

image

二、后备插槽

在组件模板的<slot></slot>中添加内容，如果html利用的这个组件中没有内容的话，就是默认显示插槽里面的内容，如果有内容则覆盖插槽中的内容
html代码如下：

<test-man></test-man>
<test-man>
  <v-btn>保存</v-btn>
</test-man>

javascript代码如下：

Vue.component('test-man', {
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot>
      <v-btn>提交</v-btn>
      </slot>
    </v-card>
    `
  })

效果如下：

image

三、作用域插槽

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

html代码如下：

<test-man v-slot="slotProps">
      <v-btn >{{slotProps.obj2.name}}</v-btn>
    </test-man>

javascript代码如下：

Vue.component('test-man', {
    data(){
      return {
        obj2:{
        name:'zhubajie',
        age:3
        }
      }
    },
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot v-bind:obj2="obj2">
      </slot>
    </v-card>
    `
  })

效果如下：

image

四、具名插槽

这类插槽可以有多个，每个都用name属性绑定一个不同的名字，在接收内容时避免发生混乱，在组件使用时用v-slot：名字的方式进行绑定。

html代码如下:

<test-man>
      <template v-slot:second>
        <span>这是第二个插槽的内容</span>
      </template>
      <template v-slot:first>
        <span>这是第一个插槽的内容</span>
      </template>
    </test-man>

javascript代码如下

Vue.component('test-man', {
    data(){
      return {
        obj2:{
        name:'zhubajie',
        age:3
        }
      }
    },
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <div>
      <slot name="first">
      </slot>
      </div>
      <span>-----这是一条分界线-----</span>
      <div>
      <slot name="second">
      </slot>
      </div>
    </v-card>
    `
  })

效果如下：

image