作用域插槽slot-scoped

先看文件关系图

models文件

<template>
<div>
  <div class="container" >
    <div class="title">{{title}}</div>
    <slot name="model1"></slot>
    // 这地方name就是具名插槽，在调用时写slot="对应插槽的名字"即可
    <slot name="btn"></slot>
    <slot name="vFor" :data="mockData"></slot>
    // :data2="mockData" 表示传递数据给父组件使用，通常用的不多
    // 通常用$emit()比较多
  </div>
</div>
</template>

<script>
export default {
  name: 'models',
  props: ['title'],
  data(){
    return{
      mockData: ['zhangsan','lisi','wanwu'],
    }
  },
  mounted(){
    this.$emit('sendData',this.mockData)
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 500px;
  height: 200px;
  box-shadow: 0 1px 2px #333333;
  .title{
    font-size: 20px;
    text-align: left;
    margin-left: 20px;
    color: #333333;
    line-height: 60px;
    border-bottom: 1px solid #e3dcdc;
  }
}
</style>

view/Home文件

<template>
  <div class="home color-primary">
    <Models title="这是标题内容" @sendData="sendData">
      <input slot="model1" type="text" placeholder="请输入内容" >
      // 调用具名插槽需要对应的slot名字，用啥插槽就写啥名字

      // 注意这地方使用时候要写在template中
      <template slot="vFor" slot-scope="mockData">
        <p>
          "mockData------" <br>
          {{mockData}}
        </p>
        <br>
        <div v-for="item in mockData.data">{{item}}</div>
        // mockData是一个对象，data2里面才是传过来的数据
      </template>
    </Models>
  </div>
</template>

<script>
import Models from 'src/components/models'
export default {
  name: 'Home',
  data(){
    return {
    }
  },
  mounted(){
  },
  methods: {
    sendData(receiveData){
      console.log('$emitData',receiveData)
    }
  },
  components: {
    Models
  }
}
</script>

<style lang="less" scoped>
.home {
  .box {
    display: inline-block;
    width: 40px;
    height: 50px;
    border: 1px dotted #445566;
  }
}
</style>

效果图如下：

在这里插入图片描述

总结下

• 具名插槽相当于一个带有名字的壳子，谁想要用，把自己标上对应的名字就能进入壳子，在页面展示
• 作用域插槽可以配合具名插槽或者匿名插槽一起使用，主要作用就是传递数据，插槽本身的数据传递给父组件，供父组件在其他组件中使用