v-slot用法簡記

• 用法示例
• • 匿名插槽與具名插槽
  • 插槽作用域
  • 組件使用插槽動態命名
• 總結

用法示例

vue2.6統一了插槽的語法v-slot

匿名插槽與具名插槽

在其他組件中使用child組件

<child><template v-slot:slotName>hello world</template> </child>

child組件

<div><slot name="slotName"></slot> </div>

上面是具名插槽的用法，省略插槽名：name屬性或插槽名為default表示匿名插槽

插槽作用域

在其他組件中使用child組件

用法一：常規用法，slotProps為自定義作用域名

<child><template v-slot:slotName=“slotProps”>hello world<span>{{ slotProps.user.firstName }}</span></template> </child>

用法二：解構插槽Prop，實際上就是ES6解構JSON，可以使用:替換參數名

<child><template v-slot:slotName=“{ user, age:nianling }”>hello world<span>{{ user.firstName }}</span><span>{{ nianling }}</span></template> </child>

child組件，定義時將需要使用的作用域數據綁定在<slot>即可，:user="user" :age="age"

<template><div><slot name="slotName" :user="user" :age="age"></slot></div> </template><script> export default {data () {return {user: {firstName: 'Cliff',lastName: 'Rhine'},age: 24}} } </script>

組件使用插槽動態命名

v-slot:{dynamicSlotName}

總結

vue2.6后插槽的用法簡單得了很多，也更加靈活，通過上面的示例可以看出，作用域插槽實際上就是在具名插槽的基礎上進行賦值。

v-slot:插槽名 v-slot:插槽名="作用域名" v-slot="作用域名"

總結

以上是生活随笔為你收集整理的vue 2.6 插槽v-slot用法记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。