扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Vue2.0 传值方式：
为广汉等地区用户提供了全套网页设计制作服务，及广汉网站建设行业解决方案。主营业务为网站设计、做网站、广汉网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。
Vue常用的三种传值方式有：
•父传子
•子传父
•非父子传值
引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：
接下来，我们通过实例来看可能会更明白一些：
1. 父组件向子组件进行传值
父组件：
父组件:
子组件：
子组件: {{inputName}}
2. 子组件向父组件传值
子组件：
子组件: {{childValue}}
父组件：
父组件: {{name}}
3. 非父子组件进行传值
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
公共bus.js
//bus.js import Vue from 'vue' export default new Vue()
组件A：
A组件: {{elementValue}}
组件B：
B组件: {{name}}
总结
以上所述是小编给大家介绍的Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网