vue3 template 特殊的标签

在 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 组件，使得组件之间的内容传递和布局定制更加方便和强大。