vue_slot

slot基本使用

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签
插槽有三种：默认插槽、具名插槽、作用域插槽

默认插槽

创建组件SlotTest，导入组件

<SlotTest>
   <template v-slot:title>这是默认插槽</template>
</SlotTest>

在SlotTest组件中通过slot标签获取传过来的值

<template>
  <div>
    <slot></slot>
  </div>
</template>

具名插槽

子组件中有多个插槽，通过给插槽指定名称方式实现一 一对应。

创建组件SlotTest，导入组件

<SlotTest>
   <template v-slot:title>这是标题</template>
   <template v-slot:values>这是内容</template>
</SlotTest>

在SlotTest组件中通过slot标签获取传过来的值

<template>
  <div>
    <slot name="title"></slot>
    <slot name="values"></slot>
  </div>
</template>

作用域插槽

把子组件data中的数据或者子组件props中的数据传到父组件的插槽中使用

1） 两个属性合并成了一个 v-slot : 插槽名称 = ’ 传过来的值 ’ 。

2） 组件页面中slot的内容没有变化 。

3） v-slot 不能用在 html 标签上 。

4） 如果是默认插槽 可以写成 v-slot=‘xxx’。

5） 还增加了 可以解构插槽props 和 设置默认值的内容，具体的可以查看官网 解构插槽

父组件

<SlotTest>
   <template v-slot='{age}'>
     <div>{{age.name}}</div>
   </template>
</SlotTest>

子组件

 <slot :age='message' ></slot>

 data(){
    return{
      message:{
        name:'张三'
      }
    }
  }