父组件向子组件进行传值：
父组件：
<template> <p> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputname="name"></child> </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>
2.子组件向父组件传值
子组件：
<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>
3.非父子组件进行传值。（非父子组件之间传值，需要定义个公共的公共实例文件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中钩子函数的具体介绍
vue自定义指令及指令定义函数的具体分析（代码）
以上就是vue常用的三种传值方式的详细内容。