Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
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中三种常用传值方式(父传子、子传父、非父子组件传值),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
文章名称:Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
链接分享:http://ybzwz.com/article/iihcoi.html