这篇文章主要介绍了某视频剪辑软件传值-三种常用传值示例，主要介绍了父组件向子组件进行传值，子组件向父组件传值和非父子组件进行传值，感兴趣的小伙伴们可以参考一下

1、父组件向子组件进行传值：

父组件：

模板

差异

父组件：

输入类型='text' v-model='name '

英国铁路公司

英国铁路公司

！-引入子组件-

child :inputName='name'/child

/div

/模板

脚本

从'导入子级。/孩子

导出默认值{

组件：{

儿童

},

data () {

返回{

名称：""

}

}

}

/脚本

子组件：

模板

差异

子组件：

span { {输入名称} span

/div

/模板

脚本

导出默认值{

//接受父组件的值

道具：{

输入名称：字符串，

必填：真

}

}

/脚本

2.子组件向父组件传值

子组件：

模板

差异

子组件：

span { {儿童值} span

！-定义一个子组件传值的方法-

输入类型='按钮'值='点击触发@click='childClick '

/div

/模板

脚本

导出默认值{

data () {

返回{

子值： '我是子组件的数据'

}

},

方法：{

childClick () {

//childByValue是在父组件在监听的方法

//第二个参数this.childValue是需要传的值

这个. emit('childByValue '，this.childValue)

}

}

}

/脚本

父组件：

模板

差异

父组件：

span{{name}}/span

英国铁路公司

英国铁路公司

！-引入子组件定义一个在的方法监听子组件的状态-

子v-on:子值='子值'/子值

/div

/模板

脚本

从'导入子级。/孩子

导出默认值{

组件：{

儿童

},

data () {

返回{

名称：""

}

},

方法：{

子代值：函数(子值){

//子值就是子组件传过来的值

this.name=childValue

}

}

}

/脚本

3.非父子组件进行传值。（非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。）

公共bus.js

//bus.js

从“vue”导入某视频剪辑软件

导出默认新Vue()

组件答：

模板

差异

A组件：

span{{elementValue}}/span

输入类型='按钮'值='点击触发@click='elementByValue '

/div

/模板

脚本

//引入公共的bug，来做为中间传达的工具

从'导入总线' bus.js '

导出默认值{

data () {

返回{

元素值：4

}

},

方法：{

elementByValue: function () {

公交车. emit('val '，this.elementValue)

}

}

}

/脚本

组件乙：

模板

差异

B组件：

输入类型='按钮'值='点击触发@click='getData '

span{{name}}/span

/div

/模板

脚本

从'导入总线' bus.js '

导出默认值{

data () {

返回{

名称：0

}

},

已安装：函数(){

var vm=this

//用$on事件来接收参数

公交车. on('val '，(data)={

console.log(数据)

vm.name=data

})

},

方法：{

getData: function () {

这个名字

}

}

}

/脚本

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。