Vue2.0中三种常用的值传递方法(父到子、子到父、非父和子组件值传递)

Vue2.0值传输模式：

在Vue框架开发项目的过程中，经常会用到组件来管理不同的功能，会抽取一些常见的组件。这个时候，一些问题和要求必然会出现？例如，如果一个组件调用另一个组件作为自己的子组件，我们如何将值传递给子组件？如果是电商网站系统的开发，还会涉及到购物车的选项，此时会涉及到非父子组件的价值转移。当然，您也可以使用Vuex状态管理工具，我们将在后面单独介绍。首先，我将介绍Vue开发中传递值的三种常见方法。

Vue有三种常用的价值转移方法：

从父到子

从孩子传给父亲

非父子价值转移

引用官网的话，父子组件的关系可以概括为道具传递和事件传递。父组件通过prop向子组件发送数据，子组件通过事件向父组件发送消息，如下图所示：

接下来，我们可以通过例子了解更多：

1.父组件将值传递给子组件

父组件：

模板div父组件：输入类型=' text' v-model=' name' br br！-介绍子组件-child:输入名称=' name '/child/div/模板脚本导入子自'。/child '导出默认值{ components: { child }，data(){ return { name 3360 ' ' } } }/脚本子组件：

Template div子组件： span { { input name } }/span/div/templatescriptexportdefault {//接受值prop 3360 { input name 3360 string，required3360true}}/script2。子组件将该值传递给父组件

子组件：

模板div子组件： span{{childValue}}/span！-定义子组件传递值的方法-input type=' button ' value=' click trigger ' @ click=' child click '/div/template script export default { data(){ return { child value : '我是子组件的数据' }}，methods : { child click(){//child value是监听父组件的方法//第二个参数this.childValue是this的值。$ emit ('childvalue '，这。childvalue)}}}/。

模板div父组件： span{{name}}/span br br！-引入一个子组件以定义一个on方法来监视子组件的状态-child v-: child by value=' childdbyvalue '/child/div/template script import child from '。/child ' export default { components : { child }，data () { return { name: '' }，Methods : { child by value : function(child value){//child value就是这个的值。name=childvalue}}}/script 3。非父子组件传递值。

在非父组件和子组件之间传递值，需要定义一个公共实例文件bus.js作为传递值的中间仓库，否则路由组件不会达到传递值的效果。

Public bus.js

//bus.js从“vue”导入vue导出默认的新vue()组件a:

template div A component : span { { element value } }/span input type=' button ' value=' click trigger ' @ click=' element by value '/div/template script//引入了公共bug。从“”导入总线。/bus . js ' export default { data(){ return { element value 3360 4 } }，methods : { element by value 3360 function(){ bus。$ emit ('val '，这个。element value)} } }/脚本组件b:

模板div B组件：输入类型='button '值=' click trigger ' @ click=' getdata ' span { { name } }/span/div/模板脚本导入总线from '。/Bus . js ' export default { data(){ return { name : 0 } }，mount ed 3360 function(){ var VM=this//使用$on事件接收参数Bus。$on('val '，(数据)={console.log(数据)vm.name=data})}，methods : { getdata 3360 function(){ this . name } }/脚本摘要

上面提到的是边肖推出的Vue2.0中常用的三种价值传递方式(父母对子女、子女对父母、非父母对子女成分)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！