vue3 template 特殊的標籤

侬侬发發表於2024-07-21
Vue

在 Vue.js 中，<template> 標籤是一種特殊的標籤，它用於定義元件的模板，但不會直接渲染為 HTML 元素。它的主要用途是在編寫元件和使用插槽時提供靈活的模板定義。以下是關於 <template> 標籤的一些關鍵概念和使用示例。

基本用法

  1. 元件模板：在單檔案元件中（.vue 檔案），<template> 標籤用於包裹元件的模板部分。
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, Vue!',
      message: 'Welcome to the Vue.js world.'
    };
  }
};
</script>

2.條件渲染：結合 v-if 和 v-else 指令，<template> 標籤可以用於包裹多元素結構。

<template>
  <div>
    <template v-if="loggedIn">
      <p>Welcome back, user!</p>
      <button @click="logout">Logout</button>
    </template>
    <template v-else>
      <p>Please log in.</p>
      <button @click="login">Login</button>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loggedIn: false
    };
  },
  methods: {
    login() {
      this.loggedIn = true;
    },
    logout() {
      this.loggedIn = false;
    }
  }
};
</script>

迴圈渲染：結合 v-for 指令，<template> 標籤可以用於包裹迴圈渲染的多元素結構。

<template>
  <div>
    <ul>
      <template v-for="(item, index) in items" :key="index">
        <li>{{ item.name }}</li>
        <li>{{ item.value }}</li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', value: 100 },
        { name: 'Item 2', value: 200 },
      ]
    };
  }
};
</script>

插槽 (Slots)

在 Vue.js 中，插槽用於向子元件傳遞內容。透過 <template> 標籤和插槽屬性，可以自定義子元件內部的內容佈局。

基本插槽

子元件 (ChildComponent.vue)

<template>
  <div>
    <slot></slot> <!-- 預設插槽 -->
  </div>
</template>

父元件 (ParentComponent.vue)

<template>
  <div>
    <ChildComponent>
      <p>This is passed to the child component.</p>
    </ChildComponent>
  </div>
</template>

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

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

命名插槽

子元件 (ChildComponent.vue)

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 預設插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父元件 (ParentComponent.vue)

<template>
  <div>
    <ChildComponent>
      <template #header>
        <h1>This is the header</h1>
      </template>
      <p>This is the main content passed to the default slot.</p>
      <template #footer>
        <p>This is the footer</p>
      </template>
    </ChildComponent>
  </div>
</template>

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

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

作用域插槽 (Scoped Slots)

子元件 (ChildComponent.vue)

<template>
  <div>
    <slot :items="items"></slot> <!-- 傳遞作用域資料 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ]
    };
  }
};
</script>

父元件 (ParentComponent.vue)

<template>
  <div>
    <ChildComponent>
      <template #default="scope">
        <ul>
          <li v-for="item in scope.items" :key="item.id">{{ item.name }}</li>
        </ul>
      </template>
    </ChildComponent>
  </div>
</template>

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

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

總結

<template> 標籤在 Vue.js 中具有多種用途，包括定義元件模板、實現條件和迴圈渲染，以及使用插槽自定義子元件內容。它提供了一種靈活的方式來編寫和組織 Vue 元件，使得元件之間的內容傳遞和佈局定製更加方便和強大。

相關文章