<template>标签的作用是什么?<slot>标签的作用是什么?

<template><slot> 都是 Vue.js 框架中用于模板编程的标签,但它们在功能和应用场景上有所不同。

1. <template> 标签的作用

<template> 标签在 Vue.js 中用作一种声明性的方式来定义模板的片段。但它本身不会被渲染到最终的 DOM 中。<template> 的主要用途有:

  1. 条件渲染 :使用 v-ifv-else-ifv-else 来控制模板片段的渲染。
javascript 复制代码
<template>  
  <div>  
    <p v-if="showMessage">Hello, Vue!</p>  
    <p v-else>Goodbye, Vue!</p>  
  </div>  
</template>
  1. 列表渲染 :使用 v-for 指令来渲染列表。
javascript 复制代码
<template>  
  <div>  
    <ul>  
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>  
    </ul>  
  </div>  
</template>
  1. 包装多个元素 :在 Vue 的模板中,一个组件通常只能有一个根元素。但有时你可能需要包装多个元素。这时,你可以使用 <template> 作为包裹元素,但请注意,<template> 本身不会被渲染到最终的 DOM 中。
javascript 复制代码
<template>  
  <template v-if="showMultipleElements">  
    <p>First paragraph.</p>  
    <p>Second paragraph.</p>  
  </template>  
</template>

2. <slot> 标签的作用

<slot> 标签在 Vue.js 中用于内容分发。在子组件中,你可以使用 <slot> 标签作为内容的插槽,然后在父组件中使用该子组件时,向这个插槽插入内容。

  • 默认插槽 :当子组件中只有一个 <slot> 时,它就是默认插槽。

子组件:

javascript 复制代码
<template>  
  <div>  
    <h2>Welcome to My Component</h2>  
    <slot></slot>  
  </div>  
</template>

父组件:

javascript 复制代码
<template>  
  <my-component>  
    <p>This is some content inserted into the slot.</p>  
  </my-component>  
</template>
  • 具名插槽 :当子组件中有多个 <slot> 时,可以给它们命名以区分。

子组件:

javascript 复制代码
<template>  
  <div>  
    <header>  
      <slot name="header"></slot>  
    </header>  
    <main>  
      <slot></slot>  
    </main>  
    <footer>  
      <slot name="footer"></slot>  
    </footer>  
  </div>  
</template>

父组件:

javascript 复制代码
<template>  
  <my-component>  
    <template v-slot:header>  
      <h1>This is the header</h1>  
    </template>  
    <p>This is some default content.</p>  
    <template v-slot:footer>  
      <p>This is the footer</p>  
    </template>  
  </my-component>  
</template>

这样,你就可以在父组件中向子组件的不同插槽插入不同的内容了。

相关推荐
cronaldo913 分钟前
研发效能DevOps: Vite 使用 Element Plus
vue.js·vue·devops
敲啊敲952710 分钟前
5.npm包
前端·npm·node.js
CodeClimb20 分钟前
【华为OD-E卷-木板 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
咸鱼翻面儿24 分钟前
Javascript异步,这次我真弄懂了!!!
javascript
brrdg_sefg24 分钟前
Rust 在前端基建中的使用
前端·rust·状态模式
m0_748230941 小时前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端·rust·excel
qq_589568101 小时前
Echarts的高级使用,动画,交互api
前端·javascript·echarts
黑客老陈2 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安2 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite