2021-01-15

vue的插槽slot简单使用

如果在父组件调用子组件时候想要在子组件中将一些内容展示，可以使用插槽，插槽可以是任何内容
子组件：

<template>
  <div style="width: 100px; height: 100px; background-color: #42b983">
    <slot name="slotone"></slot>
  </div>
  <div style="width: 100px; height: 100px; background-color: #ece198">
    <slot name="slotTwo"></slot>
  </div>
   <div style="width: 100px; height: 100px; background-color: #ece632">
   <!--默认插槽-->
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "zicomponents",
  }
</script>

父组件：

<template>
  <zicomponents>
    <template v-slot:slotone><button>具名插槽</button></template>
     <template v-slot:slotTwo><button>具名插槽</button></template>
    <button>默认插槽</button>

  </zicomponents>
</template>

<script>
import zicomponents from './zicomponents.vue'
import { ref } from 'vue'

export default {
  name: "fucomponents",
  components: {
    zicomponents
  },
}
</script>