vue slot 插槽的使用

 父组件

<template>
    <div>
        <h3>这里是父组件</h3>
        <ceshitab :lists='lists'> <!-- lists将列表传递到子组件-->
         <div slot="ceshi" slot-scope="item"> <!-- item获取子组件传回的当前项 -->
           <div v-if='item.val.id =="one"' style="color:red">{{ item.val.name }}</div> <!-- 对子组件循环的每项数据进行不用样式的定义 -->
           <div v-else-if='item.val.id =="foure"' style="color:blue">{{ item.val.name }}</div>
           <div v-else>
              {{ item.val.name }} -- 其它
           </div>
        </div>
          <div slot="boy">这是男性频道</div>
           <div>这是默认插槽</div>
        </ceshitab>
    </div>
</template>
<script>
import ceshitab from './ceshitab'

export default {
  data () {
    return {
      lists: [
        {id: 'one', name: '张三'},
        {id: 'two', name: '李四'},
        {id: 'three', name: '王二'},
        {id: 'foure', name: '麻子'}
      ]
    }
  },
  components: {
    ceshitab
  }
}
</script>

子组件

<template>
    <div>
        <h3>{{ titles }}</h3>
       <ul>
          <li v-for="list in lists"> <!-- 通过props获取父组件传递的参数 -->
              <slot name='ceshi' :val="list"></slot> <!-- :val 将当前项传回父组件 -->
          </li>
      </ul>
    </div>
</template>
<script>
export default {
  name: 'ceshitab',
  props: ['lists'],
  data () {
    return {
      titles: '这是子组件'
    }
  }
}
</script>

vue slot