Vue作用域插槽

  • Z时代
  • 2024-01-10
  • 分类：综合

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>

以上是 Vue作用域插槽 的全部内容， 来源链接： utcz.com/z/380656.html

回到顶部