-
vue中slot插槽的本质是函数
-
默认插槽: 一个名为default的函数
-
命名插槽: 一个名为插槽名的函数
-
作用域插槽: 一个带参数的函数
声明一个带有插槽的组件Card
- 正常写法
xml<template> <div> <slot name="title"/> <slot name="body"/> <slot :index="1" username="张三"/> </div> </template>
- 下面这段代码和上面代码的作用是一样的, 每一个slot标签将来会编译成一个函数, 传递到组件内部.
- 没有name属性的slot会被编译为一个名为default的无参函数
- 有name属性的会被编译为一个以name属性值作为函数名的无参函数,
- 带有其他属性的slot标签会被编译为一个带参函数.
xml<script> import { h } from 'vue' export default { render() { // 在组件内部可以通过this.$slot获取插槽内容 // 调用具名插槽函数 const title = this.$slots.title() const body = this.$slots.body() // 调用默认作用域插槽函数 const defaults = this.$slots.default({ index: 1, username: '张三' }) return h('div', {}, [ defaults, title, body ]) } } </script>
调用一个带有插槽的组件Card
xml<template> <div> <Card> <!-- 会被编译为一个名为title的无参函数const title = ()=>{}, 传递给Card组件--> <template #title> <h3>这是标题</h3> </template> <!-- 会被编译为一个名为body的无参函数const body = ()=>{}, 传递给Card组件--> <template #body> <div>这是段落</div> </template> <!-- 会被编译为一个名为default的带参函数const default = (args)=>{}, 传递给Card组件--> <template v-slot="{ index, username }"> <div>{{ index }}-{{ username }}</div> </template> </Card> </div> </template> <script setup> import Card from './Card.vue' </script>
-
vue中插槽的本质是什么?
Bruce7922024-10-13 11:56
相关推荐
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键paopaokaka_luck1 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用小林学习编程7 小时前
Springboot + vue + uni-app小程序web端全套家具商场影子信息11 小时前
vue 前端动态导入文件 import.meta.glob青阳流月11 小时前
1.vue权衡的艺术RunsenLIu11 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统样子201811 小时前
Vue3 之dialog弹框简单制作