Vue插槽之作用域插槽

Vue官方文檔

Vue在2.6.0版本以後對

作用域插槽

的文法做了修改。現總結一下

作用域插槽：讓插槽内容能夠通路

子元件

中才有的資料

有一個帶有如下模闆的 <current-user> 元件

<span>
  <slot>{{ userInfo.lastName }}</slot>
</span>
           

我們想讓它的後備内容顯示使用者的名，以取代正常情況下使用者的姓，如下：

<current-user>
  {{ userInfo.firstName }}
</current-user>
           

因為userInfo是<current-user> 元件中的資料。父元件通路不到。是以以上代碼不能夠運作。

為了讓 userInfo在父級的插槽内容可用，我們可以将 userInfo作為一個 <slot> 元素的特性綁定上去

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

綁定在 <slot> 元素上的特性被稱為

插槽 prop

。現在在父級作用域中，我們可以給 v-slot 帶一個值來定義我們提供的插槽 prop 的名字

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.userInfo.firstName }}
  </template>
</current-user>
           

在這個例子中，我們選擇将包含所有

插槽 prop

的對象命名為

slotProps

，但你也可以使用任意你喜歡的名字。

完整代碼如下：

父元件代碼：App.vue

<template>
  <div id="app">
    <current-user>
      <template v-slot:default="slotProps">{{slotProps.userInfo.lastName}}</template>
      //可以簡寫為
      //<template v-slot:default="{userInfo}">{{userInfo.lastName}}</template>
    </current-user>
  </div>
</template>

<script>
  import CurrentUser from "./components/CurrentUser";
  export default {
    name: 'App',
    components: {CurrentUser}
  }
</script>
           

子元件代碼：CurrentUser.vue

<template>
  <span>
    <slot v-bind:userInfo="userInfo">{{userInfo.firstName}}</slot>
  </span>
</template>

<script>
  export default {
    name: "CurrentUser",
    data(){
      return{
        userInfo:{
          firstName:'風',
          lastName:'清揚'
        }
      }
    }
  }
</script>