Vue slot插槽用法详解

Vue slot插槽用法详解

1、第一种父组件无slot用法

<child>
  <!-- 1、引入的子组件中有其他内容 -->
  <!-- 即使子组件里面定义了slot，但是没有父组件中没有定义一个需要显示子组件中显示slot的内容，因此就什么都没有显示，因为需要定义一个插槽的出口才会显示内容 -->
  <!-- 2、引入的子组件中没有其他内容 -->
  <!-- 当引入的组件中没有定义slot入口也没有其余内容一个空标签的时候就会默认显示slot默认内容 -->
  <h1>这就是测试内容----child-------</h1>
</child>

<template>
    <div class="container2">
        <p>这是子组件里面的内容</p>
        <slot>我是子组件里面的slot内容</slot>
    </div>
</template>

<script>
export default {
    name:'child',
    data(){
        return {

        }
    }
}
</script>

<style scoped>

</style>>

2、父组件有slot插槽用法

<child2>
  <!-- 3、插槽中 父组件中slot=