插槽 solt 的使用(vue)

实例1

• 插槽的使用

• 子组件没有加 solt 的结果，父组件里面的 OK 没有显示出来

• 加上之后的结果

实例2

• 父组件

<template>
  <div>
    <listCom>
      <template v-slot="scope">
        <p v-if="scope.row.positive">  // 若检测结果（positive=true）为阳性
          <strong>{{scope.row.name}} ~ {{scope.row.positive ? '阳性' : '阴性'}}</strong>
          <button>标记</button>
        </p>
      </template>
    </listCom>
    <h1>数据如上</h1>
  </div>
</template>

<script>
import listCom from '@/components/List'
export default {
  name: 'father',
  components: {
    listCom,
  }
}
</script>

<style scoped>
strong {
  color: red;
}
</style>

• 子组件

<template>
  <div>
    <h1>核酸检测结果</h1>
    <ul>
      <slot v-for="(item, index) in listData" :row=item>
        <li :key="index">
          {{item.name}} ~ {{item.positive ? '阳性' : '阴性'}}
        </li>
      </slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'list',
  data() {
    return {
      listData: [
        {
          name: '小明',
          positive: 0
        },
        {
          name: '小强',
          positive: 1
        },
        {
          name: '小红',
          positive: 0
        }
      ]
    }
  }
}
</script>

<style  scoped>
h1 {
  text-align: left;
  padding-left: 16px;
}
ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
li {
  list-style: none;
}
</style>

• 结果