[Vue]vue2.6插槽的详细使用情况（更新v插槽使用情况汇总） - 第三，插槽示例

3.1 todo-list实例

父页面

<template>
  <div>
    新插槽 v-slot 代替具名插槽 作用于插槽
    <todo-list> 
	    <template #todo="{todos:list}">
	      <div @click = type(todos.id)>
	         {{list.text}}
	      </div>
	    </template>
    </todo-list>  
  </div >
</template>
<script>
import todoList from "@/components/component/slotTodoChildren";
export default {
 name:"vSlot",
 components:{
  todoList
 },
 data() {
   return {

   }
 },
 methods: {
   type(data){
    console.log(data)
   }
 },
}
</script> 

子组件

<template>
  <ul class="slotTodoChildren">
    <li class="list"
      v-for="todo in todoList"
      v-bind:key="todo.id"
    >
      <!--
      我们为每个 todo 准备了一个插槽，
      将 `todo(todoList里的)` 对象作为一个插槽的 prop 传入。
      -->
      <slot name="todo" :todos="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
      </slot>
    </li>
  </ul>
</template>
<script>
export default {
  name:"slotChildren",

  data() {
    return {
      todoList:[
      {
        id:1,      
        text:"扫地"
      },
      {
        id:2,
        text:"做饭"
      },
      {
        id:3,
        text:"擦桌子"
      }
    ]
    }
  },
  created(){
    console.log(this.filteredTodos)
  }
}
</script>
<style scoped>
.slotTodoChildren .list{
  display: block;
  background: #434534;
  line-height:40px;
  margin-top: 10px;
  color: #fff;
  font-size: 24px;
  height: 40px;
}
</style>

3.2 实际使用示例

title是插槽名，插入的内容是node

老写法

<app-tree
      class="border-spe-right"
      :treeConfig="treeConfig"
      :expandedKeys.sync="treeConfig.defaultExpandedKeys"
      :selectedKeys="treeConfig.defaultSelectedKeys"
      :tree-data="treeData"
      :handle="handle"
      style="width: 20%"
      :onSearch="onSearch"
      :onSelect="onSelect"
      :onLoadData="onLoadData"
      @selectNode="onSelectNode"
    >
      <div slot="title" class="system-role-title" slot-scope="{ node }">
        <div class="title-icon" :class="node.icon"></div>
        <div class="title-label">{{ node.label }}</div>
      </div>
    </app-tree>

新写法

<app-tree
      class="half"
      :treeConfig="treeConfig"
      :expandedKeys.sync="treeConfig.defaultExpandedKeys"
      :selectedKeys="treeConfig.defaultSelectedKeys"
      :checkedKeys.sync="treeConfig.defaultCheckedKeys"
      :tree-data="treeData"
      :onSearch="onSearch"
      :onSelect="onSelect"
      :onLoadData="onLoadData"
    >
      <template #title="{ node }">
        <div class="title-icon" :class="node.icon"></div>
        <div class="title-label">{{ node.label }}</div>
      </template>
    </app-tree>