在Vue框架开发项目的过程中，经常会使用组件来管理不同的功能，会提取一些常用的组件。在本文中，我们将介绍Vue开发中常用的三种价值传递方法：父到子、子到父、非父子组件传递价值。有需要的朋友可以参考一下。
Vue2.0 传值方式：
在Vue框架开发项目的过程中，经常会使用组件来管理不同的功能，会提取一些常用的组件。这个时候必然会有一些疑问和需求？例如，如果一个组件调用另一个组件作为自己的子组件，我们如何将值传递给子组件？如果是电子商务网站系统的开发，也会涉及到购物车的选项，然后会涉及到非亲子组件的价值转移。当然，你也可以使用Vuex状态管理工具，我们后面会单独介绍。首先给大家介绍一下Vue开发中常用的三种价值传递方法。
Vue中常用的价值传递方法有三种：
父亲和儿子
从儿子传给父亲
非父子传输值
官网的一句话：父子组件的关系可以概括为道具传承和事件传承。父组件通过prop向子组件发送数据，子组件通过事件向父组件发送消息，如下图所示：
接下来，我们可能会通过例子更加清楚：
1.父组件将值传递给子组件。
父组件：
模板
差异
父组件：
输入类型='text' v-model='name '
英国铁路公司
英国铁路公司
！-引入子组件-
child :inputName='name'/child
/div
/模板
脚本
从'导入子级。/孩子
导出默认值{
组件：{
儿童
},
data () {
返回{
名称：“”
}
}
}
/脚本
子组件：
模板
差异
子组件：
span { {输入名称}}/span
/div
/模板
脚本
导出默认值{
//接受父组件的值
道具：{
inputName:字符串，
必填：真
}
}
/脚本
2.子组件将该值传递给父组件。
子组件：
模板
差异
子组件：
span { {儿童值}}/span
！-定义子组件的方法来传递值-
type=' button ' value=' click trigger ' @ click=' child click '
/div
/模板
脚本
导出默认值{
data () {
返回{
ChildValue:“我是子组件的数据”
}
},
方法：{
childClick () {
//childByValue是侦听父组件的方法。
//第二个参数this.childValue是要传递的值。
这个。$emit('childByValue '，this.childValue)
}
}
}
/脚本
父组件：
模板
差异
父组件：
span{{name}}/span
英国铁路公司
英国铁路公司
！-引入子组件以定义监控子组件状态的on方法-
child v-on:child by value=' child by value '/child
/div
/模板
脚本
从'导入子级。/孩子
导出默认值{
组件：{
儿童
},
data () {
返回{
名称：“”
}
},
方法：{
childByValue:函数(childValue) {
//childValue是子组件传递的值。
this.name=childValue
}
}
}
/脚本
3.非父子组件传递值。
要在非父子组件之间传递值，需要定义一个公共实例文件bus.js，作为传递值的中间仓库，否则无法达到路由组件之间传递值的效果。
Public bus.js
//bus.js
从“vue”导入Vue
导出默认新Vue()
组件a:
模板
差异
答：
span{{elementValue}}/span
type=' button ' value=' click trigger ' @ click=' element by value '
/div
/模板
脚本
//引入公共bug作为中间沟通的工具。
从'导入总线。/bus.js '
导出默认值{
data () {
返回{
元素值：4
}
},
方法：{
elementByValue: function () {
公交车。$emit('val '，this.elementValue)
}
}
}
/脚本
组件b:
模板
差异
组件b:
type=' button ' value=' click trigger ' @ click=' get data '
span{{name}}/span
/div
/模板
脚本
从'导入总线。/bus.js '
导出默认值{
data () {
返回{
名称：0
}
},
已安装：函数(){
var vm=this
//使用$on事件接收参数
公交车。$on('val '，(data)={
console.log(数据)
vm.name=data
})
},
方法：{
getData: function () {
这个名字
}
}
}
/脚本
总结
以上是边肖介绍的Vue2.0中常用的三种值传递方法(父对子、子对父、非父子组件)。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。