2025年vue父子组件传值emit（vue父子组件传值props是响应式数据吗）

编程日记 • 2025-03-28 21:06 • 阅读 6

**父组件是通过props属性给子组件通信的数据是单向流动父—>子 **
子组件不能修改props 否则报错

实现步骤

props 接收传值

父组件

子组件

props 有三种接收数据的方式

数组字符型 [‘msg’,‘num’]
对象型 { msg{ type:String,required: true } }

父组件通过绑定自定义事件，接收子组件传递过来的参数
子组件通过调用$emit 来触发父组件上的自定义事,从而实现传参

实现步骤

父组件

子组件

祖 --> 父孙

祖组件

父组件

孙组件

vue props type function传参数_vue.js

当我们点击按钮修改祖组件的数据

vue props type function传参数_javascript_02

祖组件修改了,子孙组件没有改变,这是因为在provide中引入数据本身并不是响应式的，所以我们可以使用一些响应式的API来完成这些功能，比如computed函数。而且在调用的时候，因为computed返回的是一个ref对象，我们要取出value属性来使用。

vue props type function传参数_前端_03

全局事件总线可以用于非父子组件之间的通信，如与兄弟组件/兄弟组件的子组件进行通信。
先订阅 --> 再发布
全局传值

安装

创建 mitt

组件A 传递数据 — 发布

组件A 接收数据 — 订阅

全局传值
全局事件总线可以用于非父子组件之间的通信，如与兄弟组件/兄弟组件的子组件进行通信。
先订阅 --> 再发布
（与mitt 类似 – 不需要定义中间件）

安装

组件A 传递数据 — 发布

组件B 接收数据 — 接收

bus总线程在vue3中已经废弃了
类似 mitt 和 pusbub
全局传值

配置

组件A 传递数据 — 发布

组件B 接收数据 — 接收

父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(“input”,val)自动修改v-model绑定的值
父传子子改父

父组件传递数据 – 不是响应式

子组件接收数据子组件可以修改父组件传递值

全局传值

子传父父控制子

父组件

利用路由跳转实现跨组件传值

1. 动态传参

2. params 传值

3. query传值

利用缓存实现跨组件传值
全局传值

1. Cookie

特性

传值

2. sessionStorage

特性

传值

3. localStorage

特性

传值

祖孙传值
父传子 -> 子级在自己的子组件上设置 v-bind=“$attr” --> 孙组件接收父组件没有接收的值

祖组件

父组件

孙组件

孙祖传值
祖组件绑定自定义事件 --> 父组件绑定自定义事件 v-on=“$listeners” --> 孙组件通过 $ $emit 触发祖组件自定义事件实现传值

祖组件

子组件

孙组件

在vue实例原型中存放数据

2025年vue父子组件传值emit（vue父子组件传值props是响应式数据吗）

1. 动态传参

2. params 传值

3. query传值

1. Cookie

2. sessionStorage

3. localStorage

相关推荐