怎么用vue slot在子組件顯示父組件傳遞的模板

怎么用Vue Slot在子組件顯示父組件傳遞的模板

在Vue.js中，slot 是一種強大的機制，允許父組件向子組件傳遞模板內容。通過使用 slot，子組件可以在其模板中預留位置，父組件可以將自定義內容插入到這些位置中。這種方式使得組件更加靈活和可復用。本文將詳細介紹如何使用Vue的 slot 機制，在子組件中顯示父組件傳遞的模板內容。

1. 基本用法

1.1 默認插槽

默認插槽是最簡單的插槽類型。子組件可以通過 <slot> 標簽定義一個插槽，父組件可以在子組件的標簽內部傳遞內容，這些內容將會替換子組件中的 <slot> 標簽。

子組件 ChildComponent.vue：

<template>
  <div class="child">
    <h2>子組件</h2>
    <slot>默認內容</slot>
  </div>
</template>

父組件 ParentComponent.vue：

<template>
  <div class="parent">
    <h1>父組件</h1>
    <ChildComponent>
      <p>這是父組件傳遞的內容</p>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

在這個例子中，父組件傳遞了一個 <p> 標簽到子組件的插槽中，子組件中的 <slot> 標簽會被替換為 <p>這是父組件傳遞的內容</p>。如果父組件沒有傳遞任何內容，子組件會顯示默認內容。

1.2 具名插槽

具名插槽允許父組件向子組件的多個插槽傳遞內容。子組件可以通過 name 屬性為插槽命名，父組件則可以通過 v-slot 指令指定要插入的內容。

子組件 ChildComponent.vue：

<template>
  <div class="child">
    <h2>子組件</h2>
    <slot name="header">默認頭部內容</slot>
    <slot>默認內容</slot>
    <slot name="footer">默認底部內容</slot>
  </div>
</template>

父組件 ParentComponent.vue：

<template>
  <div class="parent">
    <h1>父組件</h1>
    <ChildComponent>
      <template v-slot:header>
        <p>這是父組件傳遞的頭部內容</p>
      </template>
      <p>這是父組件傳遞的內容</p>
      <template v-slot:footer>
        <p>這是父組件傳遞的底部內容</p>
      </template>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

在這個例子中，父組件通過 v-slot 指令分別向子組件的 header 和 footer 插槽傳遞了內容。子組件中的具名插槽會被替換為相應的內容。

1.3 作用域插槽

作用域插槽允許子組件向父組件傳遞數據，父組件可以根據這些數據自定義插槽內容。子組件可以通過 v-bind 將數據綁定到插槽上，父組件則可以通過 v-slot 接收這些數據。

子組件 ChildComponent.vue：

<template>
  <div class="child">
    <h2>子組件</h2>
    <slot :user="user">默認內容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '張三',
        age: 25
      }
    };
  }
};
</script>

父組件 ParentComponent.vue：

<template>
  <div class="parent">
    <h1>父組件</h1>
    <ChildComponent v-slot="{ user }">
      <p>用戶姓名：{{ user.name }}</p>
      <p>用戶年齡：{{ user.age }}</p>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

在這個例子中，子組件通過 v-bind 將 user 對象傳遞給插槽，父組件通過 v-slot 接收 user 對象，并根據 user 對象的內容自定義插槽內容。

2. 插槽的高級用法

2.1 插槽的默認內容

子組件可以為插槽提供默認內容，當父組件沒有傳遞內容時，子組件會顯示默認內容。

子組件 ChildComponent.vue：

<template>
  <div class="child">
    <h2>子組件</h2>
    <slot>這是默認內容</slot>
  </div>
</template>

父組件 ParentComponent.vue：

<template>
  <div class="parent">
    <h1>父組件</h1>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

在這個例子中，父組件沒有向子組件傳遞任何內容，子組件會顯示默認內容 這是默認內容。

2.2 插槽的編譯作用域

插槽的內容是在父組件的作用域中編譯的，因此插槽內容可以訪問父組件的數據和方法，但不能訪問子組件的數據和方法。

子組件 ChildComponent.vue：

<template>
  <div class="child">
    <h2>子組件</h2>
    <slot>默認內容</slot>
  </div>
</template>

父組件 ParentComponent.vue：

<template>
  <div class="parent">
    <h1>父組件</h1>
    <ChildComponent>
      <p>{{ message }}</p>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: '這是父組件的消息'
    };
  }
};
</script>

在這個例子中，插槽內容 {{ message }} 是在父組件的作用域中編譯的，因此可以訪問父組件的 message 數據。

2.3 插槽的動態名稱

Vue 允許使用動態插槽名稱，父組件可以通過 v-slot 指令動態指定插槽名稱。

子組件 ChildComponent.vue：

<template>
  <div class="child">
    <h2>子組件</h2>
    <slot name="header">默認頭部內容</slot>
    <slot name="footer">默認底部內容</slot>
  </div>
</template>

父組件 ParentComponent.vue：

<template>
  <div class="parent">
    <h1>父組件</h1>
    <ChildComponent>
      <template v-slot:[slotName]>
        <p>這是動態插槽內容</p>
      </template>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      slotName: 'header'
    };
  }
};
</script>

在這個例子中，父組件通過 slotName 動態指定插槽名稱，子組件會根據 slotName 的值將內容插入到相應的插槽中。

3. 總結

Vue 的 slot 機制為組件的復用和靈活性提供了強大的支持。通過默認插槽、具名插槽和作用域插槽，父組件可以向子組件傳遞模板內容，并根據需要自定義子組件的顯示內容。掌握 slot 的使用方法，可以讓你在開發 Vue 應用時更加得心應手。