Vue 插槽 默认插槽 具名插槽 作用域插槽

目录

• Vue 插槽 默认插槽 具名插槽 作用域插槽
  • 案例：默认插槽
  • 案例：具名插槽
  • 作用域插槽

 

Vue 插槽 默认插槽 具名插槽 作用域插槽

插槽的作用:
父组件向子组件的指定位置插入一段html. 也是一种组件间通信方式，适用于父传子

定义插槽内容：将内容写在组件标签体中
定义插槽默认内容: 将默认内容写在插槽标签体中
定义插槽内容展示位置:
默认插槽：在组件中将slot标签写你想要展示的位置
具名插槽：在组件标签体中给元素添加slot属性，值为对应插槽名; 在组件slot标签添加对应name属性即可
作用域插槽: 插槽的定义者给插槽的使用者传递数据。template+scope | slot+v-bind

案例：默认插槽

App.vue

<template>
  <div id="app">
    <TodoHeader >
      <input type="text" placeholder="默认插槽来个文本框">
    </TodoHeader>
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
export default {
  name: "App",
  components: { TodoHeader },
};
</script>

TopHeader.vue

<template>
  <h1 class="header">
    <slot> 默认插槽，插槽没有内容时随便展示点什么。。。。 </slot>
  </h1>
</template>

<script>
export default {};
</script>

案例：具名插槽

app.vue

<template>
  <div id="app">
    <TodoHeader >
        <input type="text" placeholder="默认插槽来个文本框">
        <div slot="footer">footer content</div>
        <div slot="header">header content</div>
    </TodoHeader>
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
export default {
  name: "App",
  components: { TodoHeader },
};
</script>

TopHeader.vue

<template>
  <div class="con">
    <div class="header">
      头部
       <slot name="header">
        默认插槽，插槽没有内容时随便展示点什么。。。。
      </slot>
    </div>
    <div class="center">
      默认插槽
      <div>
        <slot>插槽没有内容时随便展示点什么。。。。 </slot>
      </div>
    </div>
    <div class="footer">
      尾部
      <slot name="footer">
       插槽没有内容时随便展示点什么。。。。
      </slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.con {
  width: 800px;
  /* height: 50px; */
  font-size: 16px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.header {
  background: lightseagreen;
}
.center {
  background: lightskyblue;
}
.footer {
  background: lightpink;
}
</style>

作用域插槽

app.vue

<template>
  <div id="app">
    <ScopeSlot>
      <template slot-scope="dataByScopeSlot">
        <ul>
          <li v-for="(item,index) in dataByScopeSlot.myData" :key="index">
            {{item}}
          </li>
        </ul>
      </template>
    </ScopeSlot>
  </div>
</template>

<script>
import ScopeSlot from "./components/ScopeSlot.vue";
export default {
  name: "App",
  components: { ScopeSlot }
};
</script>

ScopeSlot.vue

<template>
  <div class="con">
    <slot :myData="dataArr"></slot>
  </div>
</template>

<script>
export default {
  data:()=>({dataArr:[1,2,3]})
};
</script>

<style scoped>
.con {
  width: 800px;
  font-size: 16px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.header {
  background: lightseagreen;
}
.center {
  background: lightskyblue;
}
.footer {
  background: lightpink;
}
</style>