脚本宝典收集整理的这篇文章主要介绍了vue父子传值,兄弟传值,子父传值详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
// 父组件中 <template> <div> <Child ref="child" :tITle="value"/> </div> </template> <script> export default { data() { return { value: 'hello world!' } } } </script>
// 父组件中 <template> <div> <span>{{title}}</span> </div> </template> <script> export default { PRops: { title: { tyPE: String, default: '' } } } </script>
//title值为'hello world!
$emit
传值
$on
接收
$off
删除传输事件
this.$bus.$emit("flag",true)
mounted() { this.$bus.$off('flag') this.$bus.$on('flag', data=> { this.flag= data }) }
<template> <div> <Child ref="child" @getTitle="getTitle"/> </div> </template> <script> import Child From './components/Child' export default { components: { Child }, data() { return { } }, method:{ getTitle(data){ console.LOG(data) } } } </script>
打印结果为 hello xuliting
<template> <div> <span>{{title}}</span> </div> </template> <script> export default { data() { return { title: 'hello xuliting' } }, mounted(){ this.getFun() }, method:{ getFun(){ this.$emit("getTiltle",this.title) } } } </script>
组件间也可以通过传递方法从而解决。例如父组件为A,子组件有B和C。
父组件A调用子组件B的方法定义为aFun,把aFun传递给子组件C即可
这是在父组件中的组件C进行方法传递
<C :a-fun="aFun" />
引用的则是在组件C,通过props
props: { aFun: { type: Function, default: () => function() {} } }
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的vue父子传值,兄弟传值,子父传值详解全部内容,希望文章能够帮你解决vue父子传值,兄弟传值,子父传值详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。