父传子
方式：
props
效果：
把父组件的属性传入子组件，在子组件中使用
父组件代码：
子组件代码：
子传父
方式：
$emit
效果：
在子组件触发事件，修改父组件的fatherName属性
父组件代码：
子组件代码：
兄弟传值
方式：
eventBus.js
效果：
任意组件之间相互传值
代码：
方式：
$refs
效果：
把父组件的属性传入子组件，在子组件中使用
父组件代码：
子组件代码：
方式：
在父组件中使用 v-model
效果：
父子组件之间相互传值
解释：
v-model 的父子传值模式 其实是 绑定的 value 属性和 input 事件的语法糖，可以由 props+$emit 模式演变而来
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”
props+$emit 模式核心代码：
父组件代码改造：
子组件代码改造：
到此这篇vue中的父子组件传值（vue父子组件之间传值以及方法调用）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/jszy-jszl/43614.html