快捷導航

uniapp?使用自定義插槽?slot的基本步驟

更新時間：2024年04月23日 08:55:53 作者：前端布道人

在 uni-app 中使用自定義插槽（slots）可以讓開發(fā)者在封裝的組件內(nèi)部定義可替換內(nèi)容區(qū)域，從而實現(xiàn)高度定制化的組件復(fù)用，以下是如何在 uni-app 中使用自定義插槽的基本步驟,需要的朋友可以參考下

uniapp 如何使用自定義插槽 slot

在 uni-app 中使用自定義插槽（slots）可以讓開發(fā)者在封裝的組件內(nèi)部定義可替換內(nèi)容區(qū)域，從而實現(xiàn)高度定制化的組件復(fù)用。以下是如何在 uni-app 中使用自定義插槽的基本步驟：

默認插槽（匿名插槽）的使用

子組件定義：
在子組件（例如 slot-one.vue）的模板中，使用 <slot> 標簽定義一個默認插槽。

<!-- slot-one.vue -->
<template>
  <view class="slot-item">
    <!-- 默認插槽位置 -->
    <slot></slot>
  </view>
</template>

父組件使用：
在父組件中引入并使用子組件，并在子組件標簽內(nèi)部編寫你想要替換的內(nèi)容。

<!-- 父組件.vue -->
<template>
  <view>
    <slot-one>
      <!-- 這里的內(nèi)容會被替換到子組件的 slot 內(nèi) -->
      <view>這是父組件傳遞給子組件的默認插槽內(nèi)容</view>
    </slot-one>
  </view>
</template>
<script>
import SlotOne from '@/components/slot-one.vue'
export default {
  components: {
    SlotOne,
  },
}
</script>

具名插槽的使用

子組件定義：
在子組件中可以定義多個具名插槽，每個具名插槽有自己的名稱。

<!-- slot-one.vue -->
<template>
  <view class="slot-item">
    <!-- 具名插槽 example1 -->
    <slot name="header">默認頭部內(nèi)容</slot>
    <!-- 具名插槽 example2 -->
    <slot name="body">默認主體內(nèi)容</slot>
    <!-- 其他內(nèi)容... -->
  </view>
</template>

父組件使用：
父組件可以通過 v-slot 指令配合插槽名稱來填充不同內(nèi)容。

<!-- 父組件.vue -->
<template>
  <view>
    <slot-one>
      <!-- 填充具名插槽 header -->
      <template v-slot:header>
        <view>這是父組件傳遞給子組件的頭部插槽內(nèi)容</view>
      </template>
      <!-- 填充具名插槽 body -->
      <template v-slot:body>
        <view>這是父組件傳遞給子組件的主體插槽內(nèi)容</view>
      </template>
    </slot-one>
  </view>
</template>

作用域插槽的使用（Vue 2.x 版本）

在 Vue 2.x 中，作用域插槽用于從子組件向插槽內(nèi)容傳遞數(shù)據(jù)：

子組件定義：
子組件提供作用域插槽的值。

<!-- slot-one.vue (Vue 2.x) -->
<template>
  <view class="slot-item">
    <slot :item="scopedItem">
      <!-- 子組件提供的默認內(nèi)容 -->
      {{ scopedItem.defaultText }}
    </slot>
  </view>
</template>
<script>
export default {
  data() {
    return {
      scopedItem: {
        defaultText: '這是子組件提供的默認內(nèi)容',
        // 其他數(shù)據(jù)...
      },
    };
  },
};
</script>

父組件使用：
父組件接收并使用這些值。

<!-- 父組件.vue (Vue 2.x) -->
<template>
  <view>
    <slot-one>
      <template slot="item" slot-scope="{ item }">
        <view>這是從子組件獲取的：{{ item.text }}</view>
      </template>
    </slot-one>
  </view>
</template>

作用域插槽的使用（Vue 3.x 版本）

在 Vue 3.x 中，作用域插槽改為了 v-slot 函數(shù)語法：

<!-- 子組件.vue (Vue 3.x) -->
<template>
  <view class="slot-item">
    <slot let:item="scopedItem">
      {{ scopedItem.defaultText }}
    </slot>
  </view>
</template>
<script>
export default {
  setup() {
    const scopedItem = reactive({
      defaultText: '這是子組件提供的默認內(nèi)容',
      // 其他數(shù)據(jù)...
    });
    return {
      scopedItem,
    };
  },
};
</script>

<!-- 父組件.vue (Vue 3.x) -->
<template>
  <view>
    <slot-one>
      <template #default="{ item }">
        <view>這是從子組件獲取的：{{ item.text }}</view>
      </template>
    </slot-one>
  </view>
</template>

總結(jié)起來，uni-app 中使用自定義插槽的原理與 Vue.js 一致，只需按照 Vue.js 的規(guī)范在組件內(nèi)部定義插槽，并在父組件中正確使用即可。

到此這篇關(guān)于uniapp 如何使用自定義插槽 slot的文章就介紹到這了,更多相關(guān)uniapp 如何使用自定義插槽 slot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: