vue2与vue3中具名插槽使用异同

vue2与vue3中具名插槽使用异同

vue2插槽

定义插槽

bash 复制代码
<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
  </div>
</template>

使用插槽(slot属性)

bash 复制代码
<!-- 父组件 -->
<template>
  <child-component>
    <template slot="header">
      <!-- 这里的内容将填充到 header 具名插槽 -->
    </template>
  </child-component>
</template>

vue3插槽

定义插槽

同vue2定义插槽。

使用插槽(v-slot指令

bash 复制代码
<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:header="headerProps">
      <!-- 名为header的具名插槽,并且插槽的作用域数据被绑定到headerProps变量上 -->
    </template>
  </child-component>
</template>

v-slot指令的简写形式,如下:

bash 复制代码
<template>
  <child-component>
    <template #header="headerProps">
      <!-- 这与上面的完整形式是等效的,#header是v-slot:header的简写 -->
    </template>
  </child-component>
</template>

异同总结

Vue3中引入了v-slot指令,它允许你更明确地指定插槽的内容。在Vue3中,你不再需要在标签上使用slot属性来指定插槽的名称,而是直接在内部使用v-slot指令,并指定插槽的名称。

当然,在Vue3中,仍然可以使用Vue2的语法,但是推荐使用新的v-slot指令,因为它提供了更清晰的语法和一些新特性,比如作用域插槽的改进。

相关推荐
今禾几秒前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐5 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价6 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花7 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb10137 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树8 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜9 分钟前
跨平台UI自动化-Appium
前端
海底火旺9 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
不要进入那温驯的良夜10 分钟前
浏览器技术原理
前端
在泡泡里10 分钟前
前端 mcp 的使用
前端