基本使用

# 基本使用

<template id="cpn">
  <div>
    <div>{{message}}</div>
    <!-- 插槽默认值 -->
    <slot><button>button</button></slot>
  </div>
</template>
<div id="app">
  // 默认插槽
  <cpn></cpn>
  // 替换默认插槽
  <cpn><span style="color:red;">这是插槽内容222</span></cpn>
</div>

# 具名插槽

具名插槽,就是可以让插槽按指定的顺序填充,而没有具名的插槽是按照你填充的顺序排列的,而具名插槽可以自定义排列。

<template id="cpn">
  <div>
    <slot name="left">左边</slot>
    <slot name="center">中间</slot>
    <slot name="right">右边</slot>
    <slot>没有具名的插槽</slot>
  </div>
</template>
</script>
<div id="app">
  <cpn>
    <span>没具名</span>
    <span slot="left">这是左边具名插槽</span>
    <!-- 新语法 -->
    <template v-slot:center>这是中间具名插槽</template>
    <!-- 新语法缩写 -->
    <template #right>这是右边具名插槽</template>
  </cpn>
</div>

# 作用域插槽

替换插槽的标签,但是内容是由子组件来提供。

  • 子组件
<template id="cpn">
  <div>
    <slot :data="pLanguage">
      <ul>
        <li v-for="(item, index) in pLanguage" :key="index">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

const cpn = {
  template: "#cpn",
  data() {
    return { isShwo: false, pLanguage: ["JavaScript", "Java", "C++", "C"] };
  },
};
<!-- 父组件 -->
<div id="app">
  <!-- 默认插槽 -->
  <cpn></cpn>

  <!-- 目的是获取子组件数据 -->
  <cpn>
    <template slot-scope="slot">
      <!-- <span v-for="(item, index) in slot.data" :key="index">{{item}}-</span> -->
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>
</div>