vue_组件插槽的使用

vue_组件插槽的使用

不啰嗦,先教大家一个插槽的口诀:组件内使用占位,使用组件时传入具体标签插入,如果外面不给传想给个默认内容,在slot标签中书写默认内容,用来接收不到传参时显示

来喽来喽ヾ(≧▽≦*)o

👉👉👉 具名插槽

// 使用场景 
// 一个组件内有多个以上需要外部传标签的地方(需要插槽的地方)
// <slot>有一个特殊的属性:name 作用:给插槽命名

🎈插槽模板(base-layout)

<div class="container">
  <header>
  	// 这里是头部的插槽
    <slot name="header"></slot>
  </header>
  <main>
  	// 这里是内容的插槽
  	// 未定义name属性的插槽name默认是:default
    <slot></slot>
  </main>
  <footer>
    // 这里是底部的插槽
    <slot name="footer"></slot>
  </footer>
</div>

🎈组件中

在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

<base-layout>
  <template v-slot:header>
    <h1>这是头部</h1>
  </template>

  <p>这是默认default的插槽</p>
  <p>内容</p>
  // v-slot:可以简写成#,这里#后不带: 
  <template #footer>
    <p>这是底部</p>
  </template>
</base-layout>

👉👉👉 作用域插槽

// 使用场景 使用插槽时想使用组件内的变量
// 口诀:<slot :自定义属性 = "变量对象" >

// 代码演示
<span>
  <slot :age="age">
    {{ age.userAge}}
  </slot>
</span>

🎈组件中

// 接收: <template v-slot:名字 = "">

v-slot后的名字:如果slot有name属性,使用name,否则使用default

<current-user>
  <template v-slot:default="layoutAge">
    {{ layoutAge.age.userAge }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

o(￣▽￣)ブ💗比心 谢谢阅读~