vue中组件通信4(slot)

最新推荐文章于 2024-09-13 17:13:32 发布
最新推荐文章于 2024-09-13 17:13:32 发布
阅读量338 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46872121/article/details/109937053
版权

一、 slot
1.该方式用于父组件向子组件传递“标签数据”

在这里插入图片描述

2.如同一个组件，切换不同页时只是使用了不同的标签

在这里插入图片描述

3.给组件中不同站为分配数据，因此需要传递的时标签，且指定位置
在父子组件相对应的插槽（slot）格式：
在这里插入图片描述

二、 实例如下：
1.在TodoFooter子组件中，定义插槽如下：
在这里插入图片描述

2.在App父组件即指定插槽如下（在父组件中会有标签体）
在这里插入图片描述

在父组件中指定插槽需要注意，由于传过来的标签体带有某些事件的响应，原本时在子组件中定了这些相关事件函数或者属性其代码，均需要剪切到父组件中，同时，之前若有父子组件之间的传递，子组件中也可以删除（总结：一些相关的东西都定义在父组件中）

在这里插入图片描述

学学学无止境
关注
专栏目录
Vue3学习笔记-- 组件化 - 插槽Slot(重点)/非父子通信
专注于 前端开发 知识分享
10-01 864
插槽的使用过程其实是 抽取共性 预留不同;我们会将 共同的元素 内容依然在组件内 进行封装同时会将 不同的元素使用slot作为占位,让外部来决定到底显示什么样的元素;
Vue组件通信及slot插槽
amuist_ting的博客
11-18 1022
一、通过props和emit 子组件无法直接使用父组件的data数据，但是可以通过prop属性来获取并使用 1.父组件作用域中使用子组件时 给子组件标签上绑定要使用的父组件数据属性 2.子组件内部设置props 注册属性 props可以是数组或对象 例如 props: ['msg'] props是对象时，有4个属性，type为属性的数据类型，default为属性默认值，required是否必填,validator(){} 校验 如果props接收的是一个对象，需要注意，传递的其实
vue中组件通信4(slot)，零基础Web前端
m0_57541068的博客
04-10 324
2.如同一个组件，切换不同页时只是使用了不同的标签3.给组件中不同站为分配数据，因此需要传递的时标签，且指定位置在父子组件相对应的插槽（slot）格式：二、 实例如下：1.在TodoFooter子组件中，定义插槽如下：自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此
vue3组件之间通讯
m0_58889179的博客
08-09 1409
当父组件向子组件传递数据，在子组件中并未声明使用则数据会暂存到组件$attrs中，此时子组件可以通过v-bind="$attrs",将这些暂存数据传递给孙组件中。插槽分为：默认插槽，具名插槽，作用域插槽(父组件插槽内容使用子组件数据)父组件通过provide传递数据，后代组件通过inject接收数据。组件通过defineExpose对外暴露要传递的数据，1. props，实现父组件向子组件通讯。2. emit，实现子组件向父组件通讯。3.mitt，实现任意组件之间通讯。
vue中组件间通信方式-slot
qq_40885461的博客
03-28 564
有时候，header或footer使用同一个组件，那么就需要用slot来从父组件向子组件传递“标签数据” 子组件：Child.vue <template> <div> <slot name="xxx">不确定的标签结构 1</slot> <div>组件确定的标签结构</div> <s...
测试开发之前端系列 Vue 通信方式 slot (插槽)的分类
m0_75277660的博客
02-13 200
1.默认插槽——无插槽名称指定默认插槽在子组件中定义插槽结构插槽默认内容…时，插槽没有定义具体名称因此父组件在填充插槽内容时也无需指定具体是放在哪个插槽里渲染2.具名插槽——有插槽名称指定具名插槽在子组件中定义插槽结构插槽默认内容…时，插槽给出了具体名称为：center因此父组件在填充插槽内容时需要指定具体将内容放在哪个插槽里进行渲染，父组件指定具体插槽代码为省略div内容…，说明要将内容放在name = "center"的插槽里渲染。
Vue通信组件之五：slot插槽
u013089490的博客
11-13 987
      了解插槽slot之前，我们先说一下作用域。父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。因此slot分发的内容，作用域是在父组件上。 1、单个slot 在子组件内使用特殊的&lt;slot&gt;元素就可以作为这个子组件开启一个slot插槽，在父组件模板里，插入在子组件标签内的所有内容将替代子组件的&lt;slot&gt;标签及它的内容。 ...
vue中组件通信的八种方式（值得收藏！）
10-16
在Vue中，组件通信是构建复杂应用的关键。本文将详细阐述Vue组件间通信的八种方式，并结合实例说明它们的适用场景。 1. **Props / $emit** - **父组件向子组件传值**：通过在父组件模板中使用`props`属性将数据...
vue3中组件间通信之插槽（slot）
limif的博客
10-08 2765
（slot）：组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示），使用插槽可以使自定义标签内容显示；1.匿名插槽（单个插槽）：（无name属性）2.具名插槽：（有name属性）：父组件提供内容，子组件中展示。3.作用域插槽（带数据插槽）
Vue2组件间通信
li520_fei的博客
04-02 1312
1.组件间通信 props 父子通信 传递函数，子组件给父组件传递数据 传递数据，父组件给子组件传递数据 接收：三种写法['tools'],{tools:Array},{tools:{type:Array,default:[],require:true}} 路由的props 布尔值，把路由中params参数映射为组件props数据 对象，静态数据，很少用 函数形式，可以把路由中params|query参数映射为组件props数据 自定义事件 使用场景：子组件给父组件传递数据 on[简写@]
vue中的 $slot 获取插槽的节点实例
10-16
以上就是Vue中关于插槽和$slot的知识点，这部分内容无论对于Vue初学者还是进阶开发者都是非常重要的，因为插槽提供了组件内部布局的灵活性和组件间通信的能力。在开发过程中，能够合理运用插槽可以大大提升组件的...
VUE组件通信的补充（slot）
一个还在路上的人……
04-25 325
    1.最简单的slotslot（插槽）最简单的用法就是当做父模板的备用内容。当父模板中没内容的时候，子模板中的&lt;slot&gt;***&lt;/slot&gt;将会替代父模板的内容。来看个实例。&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;body&gt;        &lt;div id="app"&gt;            &l
5.vue组件间通信——插槽（slot）
weixin_43411214的博客
06-05 233
1
Vue(4)-插槽slot
超级氯化钾的博客
04-22 143
为什么使用slot？slot的基本使用 nav-bar导航栏组件，分为三部分，左中右，三个slot，预留空间 <div id="app"> <cpn><button>按钮</button></cpn> <cpn><span>span</span></cpn> <cpn><h2>h2</h2></cpn> </div>
组件通信与slot插槽
yukicm的博客
06-25 695
组件通信 为什么要进行组件通信？ 组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系 ，这个联系我们就称之为通信 组件通信的方式有以下几种 父子组件通信 使用props来实现 <body> <div id="app"> <Father></Father> </div> &...
vue学习 --- 第八天 插槽Slot/非父子通信
weixin_56663198的博客
10-17 293
1、认识插槽Slot作用 2、插槽Slot基本使用 3、具名插槽Slot使用 4、作用域插槽Slot使用 5、全局事件总线使用 6、依赖注入Provide/Inject
【Vue-slot】组件间的通信——插槽占位slot
OrangeChenZ的博客
12-09 1199
意思是：用于父组件向子组件传递“标签”，以前传的都是叫数据。 占位本来是空的，现在我往里面传什么，里面就有什么； 举个例子，还拿我资源里面的todolist来改。（todolist我上传了三个版本，地址：https://download.csdn.net/download/orangechenz/10837860） 现在改的是脚手架版本的。 子组件插槽占位： 父组件插槽：通过slot来插入，sl...
vue组件通信---父向子传递`标签数据`(slot插槽)
muzidigbig的博客
11-21 8518
一、理解 1.1此方式用于父组件向子组件传递`标签数据` 1.2插槽最后显示不显示是看父组件有没有在孩子里写模板 1.3对内容分发<插槽>的理解可以是占位符，标签替换，插槽 父组件中子标签放入带有插槽的内容，然后这些内容就会被分发到子组件中特殊的slot元素，根据name属性在子组件中重新组合，替换。 1.4作用域插槽|带数据的插槽：在作用域上绑定属性来将子组件的信息/数据传...
vue3组件通信（8）——插槽（slot）
最新发布
weixin_50845028的博客
09-13 603
默认内容
Vue EventBus组件通信详解与示例
在Vue中，组件间的通信通常有多种方式，包括props、$emit、slot以及Vuex等。EventBus是一种非官方但广泛采用的方法，尤其适用于那些不希望引入复杂状态管理（如Vuex）的简单应用场景。EventBus本质上就是一个新建的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值