详解vue2.6插槽更新v-slot用法总结

 <todo-list> 
    <template v-slot:default>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list>  
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

<slot>我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

 <todo-list> 
    <template v-slot:todo>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 
// todo
data() {
   return {
    dynamicSlotName:"todo" 
   }

 },

<slot name="todo">我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

v-slot:{dynamicSlotName}//替换标签上 v-slot:todo

#todo 替换标签上 v-slot:todo

#default 替换标签上 v-slot:todo

<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

 <slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },
// {{ user.lastName }}是默认数据  v-slot:todo 当父页面没有(="slotProps")
// 时显示 Zhang


## 显示 ##
// yue

// 相当于
function (slotProps) {
 // 插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换

<todo-list>
 <template v-slot:todo="{user,test}
" >
   {{user.firstName}}
 </template> 
</todo-list> 
## 显示 ##
## // yue

<todo-list>
 <template v-slot:todo="{user:person,test}
" >
   {{person.firstName}}
 </template> 
</todo-list> 

// v-slot:[dynamicSlotName]="{user:person,test}
## 显示 ##
## // yue

<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="lis"
      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 .lis{
  display: block;
  background: #434534;
  line-height:40px;
  margin-top: 10px;
  color: #fff;
  font-size: 24px;
  height: 40px;
}
</style>