Vue-插槽

插槽

插槽（Slot）是vue组件封装时候提供用户拓展功能，把一些不确定的功能，希望用户指定的部分定义为插槽，相当于占了一个空间给用户进行填充功能

默认插槽

1.插槽基本使用

在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符。

插槽：components/ViewA.vue

<template>
  <div>
    <h1>ViewA组件</h1>
    <div>插槽开始</div>
    <!-- 为组件的使用者预留的区域 -->
     <slot></slot>
    <div>插槽结束</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

使用组件：App.vue

<template>
  <div>
    <ViewA>
      <!-- 如果是默认插槽template可以省略 -->
      <template>
        This is a slot
      </template>
    </ViewA>
  </div>
</template>

<script>
import ViewA from '@/components/ViewA.vue'
export default {
  components: {
    ViewA
  }
}
</script>

<style>

</style>

 2.没有预留插槽，组件标签内的标签会被丢弃

如果封装过程没有预留<slot>插槽，用户提供自定义的内容会被丢弃，因为用户提供的内容，vue不知道往哪里放

组件：components/ViewA.vue

<template>
  <div>
    <h1>ViewA组件</h1>
    <div>插槽开始</div>
    <div>插槽结束</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

使用App.vue

<template>
  <div>
    <ViewA>
        This is a slot
    </ViewA>
  </div>
</template>

<script>
import ViewA from '@/components/ViewA.vue'
export default {
  components: {
    ViewA
  }
}
</script>

<style>

</style>

 3.后备内容

封装组件时候，可以预留默认内容。如果用户不往插槽提供任何内容，则该内容会生效，后备内容展示到页面上

组件：components/ViewA.vue

<template>
  <div>
    <h1>ViewA组件</h1>
    <div>插槽开始</div>
    <slot>
      我是后备内容
    </slot>
    <div>插槽结束</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

使用App.vue

<template>
  <div>
    <ViewA>
    </ViewA>
  </div>
</template>

<script>
import ViewA from '@/components/ViewA.vue'
export default {
  components: {
    ViewA
  }
}
</script>

<style>

</style>

 具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个<slot>插槽指定具体的name名称，带有具有名称的插槽叫做具名插槽.

其中使用时候，template指定v-slot属性值为插槽名（eg:   v-slot:bottom），也可以简写#插槽名(eg:   #bottom)

注：没有指定name的插槽，会有隐含的名称"default"

组件：components/ViewA.vue

<template>
  <div>
    <h1>ViewA组件</h1>
    <div>插槽开始</div>
    <div>
      <slot name="header"></slot>
    </div>
    <div>
      <slot>
        我是后备内容
      </slot>
    </div>
    <div>
      <slot name="bottom"></slot>
    </div>
    <div>插槽结束</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

使用App.vue

<template>
  <div>
    <ViewA>
      <template #header>
        This is header
      </template>
      <template #default>
        This is default
      </template>
      <template v-slot:bottom>
        this is bottom
      </template>
    </ViewA>
  </div>
</template>

<script>
import ViewA from '@/components/ViewA.vue'
export default {
  components: {
    ViewA
  }
}
</script>

<style>

</style>

 作用域插槽

在封装组件的过程中，可以为预留的<slot> 插槽绑定 props 数据，这种带有 props 数据的<slot> 叫做“作用域插槽”。

组件：components/ViewA.vue

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in datas" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <div>
              <!-- 后面会把这些属性组成一个对象 -->
              <slot name="checkBtn" :personInfo="item" :msg="msg1"></slot>
              <slot name="modiftyBtn" :personInfo="item" :msg="msg2"></slot>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    datas: Array
  },
  data () {
    return {
      msg1: '查看测试',
      msg2: '修改测试'
    }
  }
}
</script>
<style></style>

使用App.vue

<template>
  <ViewA :datas="list">
    <template #checkBtn="val">
      <button @click="checkInfo(val)">查看</button>
    </template>
    <template #modiftyBtn="val">
      <button @click="modiftyInfo(val)">修改</button>
    </template>
  </ViewA>
</template>

<script>
import ViewA from './components/ViewA.vue'
export default {
  data () {
    return {
      list: [
        {
          id: 1,
          name: '123',
          age: 20
        }
      ]
    }
  },
  methods: {
    checkInfo (val) {
      console.log(val)
    },
    modiftyInfo (val) {
      console.log(val)
    }
  },
  components: {
    ViewA
  }
}
</script>

<style></style>