本文操作环境：windows7系统、vue2.5.17版，dell g3电脑。
vue传值方式有哪些?
vue中常用的三种传值方式
父传子
父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。
父组件：
<template> <p> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputname="name"></child> //child子组件通过 :inputname=name 将值传过去 </p></template><script> import child from './child' export default { components: { child }, data () { return { name: '' } } }</script>
子组件：
<template> <p> 子组件: <span>{{inputname}}</span> </p></template><script> export default { // 接受父组件的值 props: { inputname: string, //在这里对传过来的进行接收 required: true } }</script>
子传父
子组件可以通过$emit触发父组件的自定义事件。vm.$emit(event,arg) 用于触发当前实例上的事件；
子组件：
<template> <p> 子组件: <span>{{childvalue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childclick"> </p></template><script> export default { data () { return { childvalue: '我是子组件的数据' } }, methods: { childclick () { // childbyvalue是在父组件on监听的方法 // 第二个参数this.childvalue是需要传的值 this.$emit('childbyvalue', this.childvalue) } } }</script>
父组件：
<template> <p> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child v-on:childbyvalue="childbyvalue"></child> </p></template><script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childbyvalue: function (childvalue) { // childvalue就是子组件传过来的值 this.name = childvalue } } }</script>
非父子组件传值
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
公共bus.js
//bus.jsimport vue from 'vue'export default new vue()
组件a：
<template> <p> a组件: <span>{{elementvalue}}</span> <input type="button" value="点击触发" @click="elementbyvalue"> </p></template><script> // 引入公共的bug，来做为中间传达的工具 import bus from './bus.js' export default { data () { return { elementvalue: 4 } }, methods: { elementbyvalue: function () { bus.$emit('val', this.elementvalue) } } }</script>
组件b：
<template> <p> b组件: <input type="button" value="点击触发" @click="getdata"> <span>{{name}}</span> </p></template><script> import bus from './bus.js' export default { data () { return { name: 0 } }, mounted: function () { var vm = this // 用$on事件来接收参数 bus.$on('val', (data) => { console.log(data) vm.name = data }) }, methods: { getdata: function () { this.name++ } } }</script>
相关推荐：《vue.js教程》《最新的5个vue.js视频教程精选》
以上就是vue传值方式有哪些的详细内容。