vue插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

具名插槽:

就是给插槽定义一个标识,因为有时候一个组件中可能会定义多个插槽,为了能够区分他们,就需要给他们定义一个标识。

当有多个插槽时,插槽增加了name属性来正确渲染对应的部分,父组件需要使用<template></template>。可以认为匿名插槽是特殊的具名插槽。

默认插槽:

可以为插槽定义默认内容,就和给props定义默认值一样,如果在父组件中没有传入,则使用默认内容。反之如果父组件有传入内容,则使用父组件传入的内容

作用域插槽:

让父级插槽内容能够访问子组件数据,数据从子组件往父组件流动。子组件通过插槽prop(任意个数)来绑定数据,父组件通过带值(命名随意)的v-slot来获取子组件的数据。

相关推荐
英俊潇洒美少年1 分钟前
vue的事件循环
前端·javascript·vue.js
GISer_Jing2 分钟前
Next.js全栈开发实战与面试指南
前端·javascript·react.js
im_AMBER3 分钟前
万字长文:从零实现 JWT 鉴权
前端·react.js·express
发量浓郁的程序猿4 分钟前
uniapp vue3手搓签名组件
前端
Julyued6 分钟前
vue3开发echarts热力图
前端·echarts
进击的尘埃7 分钟前
WASM 替代服务端的场景探索
javascript
本末倒置1838 分钟前
拒绝繁琐配置!用 Tailwind CSS 3 搞定多主题 + 暗色模式切换,这套方案谁用谁香
前端
发量浓郁的程序猿9 分钟前
pdfjsLib预览本地PDF文件,操作栏不展示下载、打印双页操作
前端
We་ct36 分钟前
LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置:二分查找实战
前端·算法·leetcode·typescript·二分