作用域插槽的使用和應用場景

一、作用域插槽使用方法

作用域插槽是在父組件上定義一個插槽，並且在該插槽內部的內容中，可以訪問子組件的數據和方法。子組件利用v-bind指令來綁定父組件中的數據或傳遞方法。

<!-- 父組件 -->
<parent>
  <template v-slot:default>
    <child>
      <template v-slot:slotName="slotProps">
      </template>
    </child>
  </template>
</parent>

<!-- 子組件 -->
<child>
  <template v-slot:slotName="slotProps">
    <div>{{ slotProps.data }}</div>
  </template>
</child>

在父組件中，通過v-slot:default為子組件指定了一個插槽名稱。在子組件中，通過v-slot:slotName來指定它為父組件中指定的插槽。在v-slot:slotName中，我們可以通過傳遞slotProps來獲取父組件中的數據，其中slotProps是一個對象，包含所需數據的屬性。

二、作用域插槽和具名插槽能一起用嗎？

是的，可以。具名插槽和作用域插槽是可以同時存在的。可以將具名插槽和作用域插槽一起使用，做到更細粒度的控制。

<!-- 父組件 -->
<parent>
  <template v-slot:default>
    <child>
      <template v-slot:header>
        <h1>{{ title }}</h1>
      </template>
      <template v-slot:body="slotProps">
        <p>{{ slotProps.articleContent }}</p>
      </template>
    </child>
  </template>
</parent>

<!-- 子組件 -->
<child>
  <slot name="header"></slot>
  <template v-slot:body="slotProps">
    <div>{{ slotProps.data }}</div>
  </template>
</child>

在父組件中，我們為child組件指定了兩個具名插槽：header和body。其中header不傳遞數據，僅用於渲染標題。body通過作用域插槽傳遞數據給子組件。在子組件中，我們對header進行了直接渲染，對body組件通過v-slot指令獲取了父組件中傳遞的數據。

三、作用域插槽如何傳值

在父組件中，當為作用域插槽指定名稱時，可以通過傳遞一個包含所需數據的對象來向子組件傳遞數據。

<!-- 父組件 -->
<parent>
  <template v-slot:default="slotProps">
    <child :title="slotProps.title"></child>
  </template>
</parent>

<!-- 子組件 -->
<child>
  <h1>{{ title }}</h1> 
</child>

在父組件中，我們通過v-slot指令指定了作用域插槽default，並通過傳遞一個包含所需數據的對象來向子組件傳遞數據。在子組件中，我們通過props接收父組件傳遞的數據。

四、作用域插槽多個數據

如果需要在作用域插槽中傳遞多個數據，則可以使用一個對象字面量來傳遞多個屬性。

<!-- 父組件 -->
<parent>
  <template v-slot:default="slotProps">
    <child :title="slotProps.title" :content="slotProps.content"></child>
  </template>
</parent>

<!-- 子組件 -->
<child>
  <h1>{{ title }}</h1> 
  <p>{{ content }}</p>
</child>

五、作用域插槽的使用

在組件中使用作用域插槽可以將組件的數據暴露給父組件，父組件可以對這個數據進行操作，組件內的數據狀態不會改變。

舉個例子，在一個列表頁中，我們可能有多個列表項，列表項可以根據傳入的數據進行渲染。在某些情況下，父組件需要對列表項的展示進行一些操作，比如分頁、篩選等。這時候可以使用作用域插槽，將列表項的數據暴露給父組件進行操作。如下：

<!-- 父組件 -->
<template>
  <div>
    <my-list :list-data="listData">
      <template v-slot:list-item="slotProps">
        <div>{{ slotProps.itemData }}</div>
        <div v-if="slotProps.itemData.visible">可以展示</div>
      </template>
    </my-list>
    <button @click="handleFilter">篩選</button>
  </div>
</template>

<script>
import MyList from './MyList.vue';

export default {
  components: {
    MyList,
  },
  data() {
    return {
      listData: [
        { id: 1, name: 'item1', visible: true },
        { id: 2, name: 'item2', visible: false },
        { id: 3, name: 'item3', visible: true },
        { id: 4, name: 'item4', visible: false },
        { id: 5, name: 'item5', visible: true },
      ],
    };
  },
  methods: {
    handleFilter() {
      this.listData.forEach((item) => {
        item.visible = !item.visible;
      });
    },
  },
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <ul>
      <li v-for="item in listData" :key="item.id">
        <slot name="list-item" :itemData="item"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

在父組件中，我們定義了一個名為list-item的作用域插槽，將列表項的數據暴露給父組件，父組件可以通過訪問slotProps.itemData來獲取列表項的數據。在父組件的按鈕點擊事件中，我們通過操作父組件的listData中每個item的visible屬性來控制列表項的展示與否。

六、vue作用域插槽

作用域插槽是Vue中高級別的插槽技術之一。Vue的另一個插槽技術是具名插槽。作用域插槽可以通過將子組件中的數據暴露給父組件，為組件提供更高額外的數據靈活性。

七、vue作用域插槽使用場景

使用場景：

當上層組件需要在數據上處理某些邏輯時，可以使用作用域插槽將某個數據傳遞到上層組件中；
當上層組件需要對子組件的某些內容進行自定義展示時，可以使用具名插槽和作用域插槽相結合，實現更細粒度的控制。
適用於列表和表單等組件，讓組合性更清晰。

八、作用域插槽和普通插槽的區別

普通插槽是不具備傳遞數據的能力的，而作用域插槽可以通過指定一個slotProps對象來傳遞數據。作用域插槽還可以指定名稱，從而區分多個插槽。

九、作用域插槽快捷方式

Vue 2.6.0+ 中添加了一個縮寫語法，用於將所有 prop 作為作用域插槽的參數傳遞給子組件。

<!-- 父組件 -->
<parent>
  <template v-slot:default="slotProps">
    <child v-bind="slotProps"></child>
  </template>
</parent>

在上面的例子中，我們使用v-bind指令將父組件的所有prop傳遞給子組件。子組件中不再需要接收prop，作用域插槽中可以直接訪問這些值。

十、總結

作用域插槽是Vue中高級別的插槽技術之一，可以將子組件的數據暴露給父組件進行操作，同時也具有名稱、傳遞多個數據等優點。通過作用域插槽的使用，可以實現更加細緻的組件間數據傳遞和交互。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/198201.html