vue父子传值|vue父子传值,兄弟传值,子父传值详解子父传值详解|兄弟传值

【vue父子传值|vue父子传值,兄弟传值,子父传值详解】
一、父组件向子组件传值
1.父组件.vue

// 父组件中

2.子组件.vue

// 父组件中

//title值为'hello world!

二、兄弟组件间传值还可以通过中间件Bus $emit 传值
$on 接收
$off 删除传输事件

1.A组件.js

this.$bus.$emit("flag",true)

2.B组件.js

mounted() {this.$bus.$off('flag')this.$bus.$on('flag', data=> {this.flag= data})}

三、子组件向父组件传值
1.父组件.js

打印结果为 hello xuliting

2.子组件.js

总结：组件间也可以通过传递方法从而解决。例如父组件为A，子组件有B和C。
父组件A调用子组件B的方法定义为aFun，把aFun传递给子组件C即可

这是在父组件中的组件C进行方法传递

引用的则是在组件C，通过props

props: {aFun: {type: Function,default: () => function() {}}}

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

vue父子传值|vue父子传值,兄弟传值,子父传值详解