Vue作用域插槽

假設我們有一個子組件slot-test

<template>
   <span>
 <slot >
    {{ user.lastName  }}
  </slot>
</span>
</template>

<script>
    export default {
        name: "slot-test", data: function () {
            return {user: {lastName: "guodong",
                firstName:"hu"}};
        }
    };

</script>

我們可能想換掉備用內容，用名而非姓來顯示。如下：

<slot-test> 
{{ user.firstName }} 
</slot-test>

如果這樣寫，程序會報錯，為了讓 user 在父級的插槽內容中可用，我們可以將 user 作為 <slot> 元素的一個 attribute 綁定上去

<slot v-bind:user="user">
    {{ user.lastName  }}
  </slot>

現在在父級作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字，這了我取了info，可以改：

        <slot-test  v-slot="info">
            {{ info.user.firstName }}
        </slot-test>

作用域插槽的內部工作原理是將你的插槽內容包括在一個傳入單個參數的函數里：

function (slotProps) {
  // 插槽內容
}

這意味着 v-slot 的值實際上可以是任何能夠作為函數定義中的參數的 JavaScript 表達式。所以在支持的環境下 (單文件組件或現代瀏覽器)，你也可以使用 ES2015 解構來傳入具體的插槽 prop，如下：

<slot-test v-slot="{ user }">

 {{ user.firstName }} 

</current-user>

這樣可以使模板更簡潔，尤其是在該插槽提供了多個 prop 的時候。它同樣開啟了 prop 重命名等其它可能，例如將 user 重命名為 person：

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

你甚至可以定義后備內容，用於插槽 prop 是 undefined 的情形：

<slot-test v-slot="{ user = { firstName: 'Guest' } }">
 {{ user.firstName }}
 </slot-test>