vue 2.6 插槽更新 v-slot 用法總結

在 2.6.0 中，咱們爲具名插槽和做用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。

引vue官方文檔
以前作項目時,對插槽理解太少了,這兩天學習時,才發現插槽更新用v-slot了,本身作了些簡單總結,與你們分享一下~

插槽

個人理解就是
父頁面在組件標籤內插入任意內容,子組件內插糟slot控制擺放位置
(匿名插槽,具名插槽)

插槽分類

插槽一共就三大類
1.匿名插槽(也叫默認插槽): 沒有命名,有且只有一個
2.具名插槽: 相對匿名插槽組件slot標籤帶name命名的
3.做用域插槽: 子組件內數據能夠被父頁面拿到(解決了數據只能從父頁面傳遞給子組件)

匿名插槽(也叫默認插槽default)

用法:個人理解,匿名插糟只須要一個.(就是這些,不太複雜)
父頁面:

<todo-list> 
        <template v-slot:default>
              任意內容
             <p>我是匿名插槽 </p>
        </template>
</todo-list>    
//v-slot:default寫上感受和具名寫法比較統一,容易理解,也能夠不用寫

子組件 todoList.vue

<slot>我是默認值</slot>

##顯示##
// 任意內容
// 我是匿名插槽

具名插槽(name)

用法:個人理解,和匿名插槽比較,就是必須起名todo對應,能夠有多個具名插槽.(沒了~)
父頁面

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

 },

子組件

<slot name="todo">我是默認值</slot>

##顯示##
// 任意內容
// 我是匿名插槽

對 v-slot:todo 作操做:

動態命名

v-slot:{dynamicSlotName}//替換標籤上 v-slot:todo

具名插槽縮寫(匿名插槽用法)(能夠後看)

#todo 替換標籤上 v-slot:todo

匿名若是想用必須加上default

#default 替換標籤上 v-slot:todo

父級模板裏的全部內容都是在父級做用域中編譯的；子模板裏的全部內容都是在子做用域中編譯的。

做用域插槽

1.重點是slotProps接取子組件裏:user="user" :test="test"相似屬性的數據
父頁面

<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

解構插槽Prop

父頁面 (子組件不變 顯示同樣)

// 至關於
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

獨佔默認插槽縮寫(能夠後看)
感受沒什麼機會用,限制條件太多

總結

在用上v-slot以後 只須要考慮好
1.是否須要命名(匿名插槽,具名插槽)
2.父頁面是否須要取存在子頁面的數據(做用域插槽)

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="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>