2025年vue插槽传值（vue插槽怎么传值）

科技前沿 • 2025-04-16 13:07 • 阅读 48

大家好，我是讯享网，很高兴认识大家。

*子组件实例里写props对象,绑定属性,属性里可设置传入的数据类型和无数据传入时的默认值

*子组件里绑定属性接受父组件传来的数据

*将数据展示在页面中

2. 子向父传值

Vue里, 子组件向父组件传值使用的是事件发送和事件监听

子组件里发送事件,父组件里监听对应的子组件事件接收数据

父组件里获取child1的实例, 通过 $refs属性获取对应组件里的子组件 *在点击事件里通过$emit自定义事件,将要传递的参数传给监听器

*在子组件里绑定自定义事件,并定义方法接受收子组件传来的数据,方法里有形参.

*在父组件里定义该方法,参数为子组件传来的数据,在父组件里定义一个变量接收子组件传来的数据

3. 兄弟之间传值–中间人模式

1). 子向父传值

2). 父向子传值

上代码:

4. 兄弟组件传值–消息发送

新建一个Vue实例,利用该实例发送消息,还利用该实例接收消息

* 在传递数据的子组件child1里定义点击事件,绑定事件,监听数据

* 在接收数据的子组件child2组件创建完毕之后(created)里监听自定义事件,并创建函数回调child1传递来的数据

* 将创建的函数写进child2的方法里,并定义变量接收数据. 显示在页面中

5. Vue插槽

插槽slot: slot的作用: 用来接收写在组件里的内容,这些内容会进入到slot里进行显示

5.1 普通插槽

5.2 具名插槽

给模板里的slot组件添加name属性,表示插槽的名字,在传入的内容标签设置slot属性,值相同进入对应的slot. 凡是没有设置slot属性的标签统统会进入到没有设置name属性的slot组件里

自 Vue2.6.0 起 v-slot 指令被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案.具体写法如下:

5.3 作用域插槽

默认情况下,组件里的内容要绑定数据,其作用域是父级的作用域,如果想让器对应组建的作用域起效果需要使用作用域插槽写法

自 Vue2.6.0 起在<template>上使用特殊的 slot-scope 特性可以接收传递给插槽的prop(把这里提到过的 <slot-example> 组件作为示例)：

用到更多:

* vue实例.$emit（'自定义事件名',要传送的数据）； 触发当前实例上的事件，要传递的数据会传给监听器；* vue实例.$on(‘事件名’,callback)—callback回调$emit要传送的数据；监听当前实例上自定义事件；