匿名插槽 插槽没有名字

• 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，填充的内容会替换子组件的标签。

父组件A
<template>
  <div>
    <HelloWorld><p>会移动的城堡</p></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../../components/solt/index.vue";
export default {
  components: {
    HelloWorld,
  },
};
</script>

父组件B
<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../../components/solt/index.vue";
export default {
  components: {
    HelloWorld,
  },
};
</script>

子组件
template>
  <div>
    <slot></slot>
    <p>宫崎骏</p>
  </div>
</template>
<script>
export default {};
</script>

父组件A 自定义了一个子组件中写了一段内容，子组件里面有solt插槽

当父组件A 渲染子组件里面内容的时候solt便签的时候会替换成会移动的城堡

父组件B 自定义了一个子组件 父组件B里面没有渲染内容solt就不会显示留了一个空位只是提供了一个位置

具名插槽

• 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

父组件A

<template #headr>
  <div>
    <HelloWorld>
    //两种写法
        <template v-slot:headr>
        <h1>Here might be a page title</h1>
      </template>
            //v-slot可以简写成#
      //具名插槽的名字必须在写在template标签才能生效
      <template #footer>
        <div>会移动的城堡1</div>
      </template>
    </HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../../components/solt/index.vue";
export default {
  components: {
    HelloWorld,
  },
};
</script>

子组件

<template>
  <div>
    <slot name="headr"></slot>
    <p>宫崎骏</p>
    <slot name="footer"></slot>
  </div>
</template>
<script>
</script>

作用域插槽

作用域插槽就是 :绑定数据的插槽.

父组件A

<template #headr>
 <div>
   <HelloWorld>
     <!-- <template v-slot:headr="scope">
       <h1>{{ scope.sex }}</h1>
       {{ scope.age }}
     </template> -->
     <!-- v-slot可以简写成# 
   父组件语法  #子组件slot内插槽名="scope" -->
     <template #headr="scope">
       <h1>{{ scope.sex }}</h1>
       {{ scope.age }}
     </template>
   </HelloWorld>
 </div>
</template>

<script>
import HelloWorld from "../../components/solt/index.vue";
export default {
 components: {
   HelloWorld,
 },
};
</script>

<style>
</style>

子组件

<template>
 <div>
   <slot name="headr" :sex="sex" :age="15"></slot>
   <!-- 语法<slot name="插槽名" :sex="字符串" :age="字符串"></slot> -->
   <p>宫崎骏</p>
 </div>
</template>

<script>
export default {
 data() {
   return {
     sex: "男",
   };
 },
};
</script>