vue中的父子组件传值（vue父子组件之间传值以及方法调用）

科技前沿 • 2025-05-27 14:32 • 阅读 41

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

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

父传子

方式：

props

效果：

把父组件的属性传入子组件，在子组件中使用

父组件代码：

讯享网

子组件代码：

子传父

方式：

$emit

效果：

在子组件触发事件，修改父组件的fatherName属性

父组件代码：

讯享网

子组件代码：

兄弟传值

方式：

eventBus.js

效果：

任意组件之间相互传值

讯享网

代码：

讯享网

方式：

$refs

效果：

把父组件的属性传入子组件，在子组件中使用

父组件代码：

子组件代码：

讯享网

方式：

在父组件中使用 v-model

效果：

父子组件之间相互传值

解释：

v-model 的父子传值模式其实是绑定的 value 属性和 input 事件的语法糖，可以由 props+$emit 模式演变而来</p> <h5>props+$emit：

父组件代码：

子组件代码：

讯享网

核心代码改造:

v-model

父组件代码：

讯享网

子组件代码：

问题：

父组件变量只能叫 value
子组件自定义事件只能叫 input

解决：

通过设置子组件身上的model属性，来更改变量名name和自定义事件input的问题

讯享网

父组件代码：

子组件代码：

讯享网

优势：

v-model模式父子传值比props+$emit模式更加简单

缺点：

不能够一次传递多个属性，通过方法四可以处理

方式：

在父组件中使用绑定修饰符 :newValue.sync = ‘newValue’

效果：

父子组件之间相互传值

解释：

.sync 的父子传值模式其实是绑定的属性和事件的语法糖

:val.sync = ‘val’ 等价于 :val“val” @update:val = “val = $event”</p> <h5>props+$emit 模式核心代码：

父组件代码改造：

子组件代码改造：

讯享网

vue中的父子组件传值（vue父子组件之间传值以及方法调用）

父传子

方式：

效果：

父组件代码：

子组件代码：

子传父

方式：

效果：

父组件代码：

子组件代码：

兄弟传值

方式：

效果：

代码：

方式：

效果：

父组件代码：

子组件代码：

方式：

效果：

解释：

父组件代码：

子组件代码：

核心代码改造:

v-model

父组件代码：

子组件代码：

问题：

解决：

父组件代码：

子组件代码：

优势：

缺点：

方式：

效果：

解释：

父组件代码改造：

子组件代码改造：

相关推荐