Vue插槽

已于 2023-06-15 16:37:27 修改
阅读量52 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-06-15 16:36:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54976447/article/details/131228344
版权

(一) 什么是插槽

       插槽就是子组件中提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码.

(二) 默认插槽

      AboutView组件里引入Son (此时Son为AboutView的子组件)

     

Son里面使用插槽

此时AboutView组件展示不同的页面

(三) 具名插槽

     给Son组件中slot插槽写一个name名字     

在 AboutView组件中给对应的结构写上 : slot="插槽起的name名字" 或 v-slot:插槽起的name名字(v-slot 只能添加在 <template> 上)

(四) 作用域插槽

当插槽内容能够访问子组件中才有的数据时使用作用域插槽

@水清梦蓝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue插槽
01-07
v-slot 为vue插槽指令 1.匿名插槽/默认插槽 只可以使用一次，由父组件提供样式和内容，子组件只负责显示 2.具名插槽 可以使用多次 插槽内容 3.作用域插槽（带数据的插槽） 在slot上面绑定数据 {{集合.值}} 直接...
vue 插槽
青蛙king的博客
10-27 1187
一、插槽的本质 分发内容，传递复杂的内容。 二、插槽分类 插槽分为： 默认插槽：必须唯一，可省略。 具名插槽。 作用域插槽：可以接收子组件传递的值，根据子组件传递的不同值，返回不同的内容。 v-slot指令：用来定义一个 具名插槽 或 作用域插槽。 1、默认插槽 <template v-slot:suf-icon> <span>后置图标</span> </template> 2、具名插槽 <template v-s..
Vue 插槽
m0_60273757的博客
01-06 391
清楚明了看清插槽！
vue插槽原理
qingsemengshou的博客
08-09 843
vue插槽原理之前一直理解的不好，因为之前一直理解错了，首先插槽和作用域插槽是完全不同的东西，要区别对待 对于插槽称之为slot let AppLayout = { template: '<div class="container">' + '<header><slot name="header"></slot></header>' + '<main><slot>默认内容</slot>&lt..
Vue插槽原理与用法详解
10-17
主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下
vue插槽slot的简单理解与用法实例分析
01-21
本文实例讲述了vue插槽slot的简单理解与用法。分享给大家供大家参考，具体如下： vue中插槽的使用非常广泛，本文就插槽的使用和理解简单总结。 从字面理解插槽是预先插入一个代码空间，用于后期塞入数据。 插槽分类 ...
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
Vue插槽的使用
01-07
具名插槽 // input.vue input组件 // home.vue 我是左边的插槽 我是右边的插槽 // 导入组件 import input from '@/components/input' export default { components: { input } } 作用域插槽 把子组件的值传递...
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 208
vite.config.ts配置。
vue中computed计算属性
luna_H的博客
05-19 247
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true。4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})写法：监听的属性名(新值,旧值){}2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，1.computed能做到的watch都可以，watch能做到的computed不一定能。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 701
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 512
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
vue中的事件
weixin_43390711的博客
05-16 166
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1170
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 768
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 363
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
CSS+vue.js
weixin_56316833的博客
05-19 217
p {/*设置字体颜色*/color: red;/*设置字体大小*/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值