vue递归组件如何传递事件给父组件？

Question

如题，根据数据遍历递归，不明确具体会遍历几次，形式大概如下：

<parent>
    <children>
        <children>
            <children>
                ...
            </children>
        </children>
    </children>
</parent>

我现在要在最后一层children传出数据到parent接收，但是emit只能向上传递一层，有什么好的解决方案吗？除了用vuex我没好的想法了

Answer 1

用eventBus 策略。
定义：

// bus.js
import Vue from 'vue'
export default new Vue()

使用：
parent

// parent.vue
import bus from './bus'

export default {
    mounted(){
        bus.$on('post-message',(msg)=>{
            console.log(msg)
        })
    }
}

children：

// children.vue
import bus from './bus'

export default {
    mounted(){
        bus.$emit('post-message','发送')
    }
}

Answer 2

vuex就是为了解决数据深层传递、兄弟组件数据传递的最佳方式。

Answer 3

使用Broadcast Channel 或者 window.postMessage可以很方便的传值或者事件触发

参考文档:

https://developer.mozilla.org...

https://developer.mozilla.org...