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

posted @   侬侬发  阅读(981)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示