-
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
相关推荐
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式JSON_L12 小时前
Vue 电影导航组件计算机编程果茶熊12 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计奇舞精选13 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程Britney⁺♛&?ꪶꪫꪜꫀ16 小时前
Vue2上江城开朗的豌豆16 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!海天胜景19 小时前
vue3 el-table 列数据合计