【Vue 学习】插槽的使用

插槽的使用

1. 默认插槽

子组件

<template>
  <div>
    <slot></slot>
    <slot>父组件使用了子组件，但是没有传递结构，我这个默认内容就出现了</slot>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
}
</script>

父组件

• 使用的子组件里面插入的结构，均是在 APP 组件里面进行解析之后，再插入子组件的插槽的位置
• 可以把样式写到 APP 中
• 也可以写到 子组件中

<template>
  <div>
    <HelloWorld>
      <h1 class="box1">Hello,001!</h1>
    </HelloWorld>
    <hr>
    <HelloWorld/>
    <hr>
    <HelloWorld>
      <h1 class="box2">Hello,003!</h1>
    </HelloWorld>
  </div>
</template>


<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>


<style>
.box1 {
  color: red;
}
.box2 {
  color: blue;
}
</style>

2. 具名插槽

（1）默认写法

有名字的插槽，适用于有多个插槽

写完名称之后可以追加

子组件

<template>
  <div>
    <slot name="box1"></slot>
    <slot name="box2">父组件使用了子组件，但是没有传递结构，我这个默认内容就出现了</slot>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
}
</script>

父组件

<template>
  <HelloWorld>
    <h1 slot="box1" class="box1">Hello,001!</h1>
    <ul slot="box2" class="box2">
      <li>001</li>
      <li>002</li>
      <li>003</li>
    </ul>
  </HelloWorld>
</template>


<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>


<style>
.box1 {
  color: red;
}
.box2 {
  color: blue;
}
</style>

（2）结合 template 标签使用具名插槽

可以同时包裹多个结构，且不用再增加一个多余的 div 包裹结构

使用 template 标签，不会成为 DOM

子组件

<template>
  <div>
    <slot name="box">父组件使用了子组件，但是没有传递结构，我这个默认内容就出现了</slot>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
}
</script>

父组件

<template>
  <HelloWorld>
    <template slot="box">
      <h1>Hello,001!</h1>
      <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
      </ul>
    </template>
  </HelloWorld>
</template>


<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

3. 作用域插槽

适用于数据在子组件，父组件使用子组件，父组件将结构填充到子组件

子组件

<template>
  <div>
    <slot name="box" :users="users" :title="'我是子组件传递给父组件的 title 属性'">
      父组件使用了子组件，但是没有传递结构，我这个默认内容就出现了
    </slot>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      users: [
        {'id': '001', 'name': 'tom'},
        {'id': '002', 'name': 'mary'},
        {'id': '003', 'name': 'jack'},
      ]
    }
  }
}
</script>

父组件

<template>
  <div>
    <HelloWorld>
      <!-- 父组件接收子组件传递的数据，全部封装到 data 对象里面 -->
      <template slot="box" scope="data">
        <h6>{{data.title}}</h6>
        <ul>
          <li v-for="user in data.users" :key="user.id">{{ user.name }}</li>
        </ul>
      </template>
    </HelloWorld>
    <hr>
    <HelloWorld>
      <template slot="box" scope="data">
        <h1>{{data.title}}</h1>
        <ol>
          <li v-for="user in data.users" :key="user.id">{{ user.name }}</li>
        </ol>
      </template>
    </HelloWorld>
  </div>
</template>


<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>