Vue-Cli插槽

Vue-Cli插槽

1.默认插槽

• 父组件

<!--child为自定义的子组件 要想在父组件对其使用插槽时 子组件一定是双标签 将要插入的值写在里面-->
<child>
      <h3>我是标题</h3>
</child>

• 子组件

   <!-- 声明位置，用于在调用此组件为双标签时，中间内容显示的位置 -->
    <!-- 单个插槽，一个组件只能有一个默认插槽 子组件中添加slot标签会显示父组件插槽的内容 -->
    <slot name="default"></slot>

2.具名插槽

• 父组件

 <!-- slot 定义插槽名称 vue2.6之前 -- 依次执行显示 都会显示 -->
      <h3 slot="header">我是文章标题1</h3>
      <h3 slot="header">我是文章标题2</h3>
 <!--vue2.6之后写法 它只能写在template中 不能直接写在html标签上 且重复调用只会执行最后一次-->
  <template v-slot:header>     
        <h3>我是文章标题1</h3>
  </template>
  
   <template #header>
    <h3>！！语法糖：可以用 # 号来代替 v-slot ！！</h3>
   </template>

• 子组件

  <!-- 具名插槽，给slot添加一个名称，名称不能重复 -->
    <slot name="header">这里的值会被替换成父组件的值</slot>