vue中函数回调传值

在业务开发中，有时候会碰到一种情况：组件内部会触发一些事件用来请求新的数据，数据请求到后将新的数据继续在组件内进行处理。这个场景我们有三种方式可以实现它：

1. 将数据请求写在组件内部，缺点不好维护，违反了单项数据流的原则。
2. 通常我们可以通过this.$emit() 将事件传递到父组件中，让父组件请求数据，然后再传值给子组件，子组件拿到数据后进行下一步处理。适用大部分场景。
3. 在父组件中写一个数据请求的函数，形参为回调，父组件将数据请求拿到后，通过传参传递给子组件，子组件通过传递过来的函数进行回调，从而进一步处理数据。

我们重点讨论第三种方式。

---

父组件：

<t-cascader
 :source="source"
 :loadData="loadData">
</t-cascader>

methods: {
    loadData(node, callback) {
        let {name, id, parent_id} = node
        this.ajax(id).then(result => {
            callback(result)
        })
    },
    ajax(parent_id = 0) {
        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                let result = db.filter(item => item.parent_id == parent_id)
                resolve(result)
            }, 1000)
        })
    },
}

子组件：

props: {
    source: {
        type: Array
    },
    loadData: {
        type: Function,
    }
},
methods: {
    updateSelected(newItem) {
        this.$emit('update:selected', newItem)
        let lastItem = newItem[newItem.length - 1]
        // 上面是业务代码片段
        this.loadData(lastItem, result => {
            let last = this.source.filter(item => item.id === lastItem.id)[0]
            this.$set(last, "children", result)
        })// 将监听的值回调出去
    }
}

我们通过this.loadData() 函数 将父组件中的请求数据通过函数第二个形参callback回调的形式传给子组件中，从而正好衔接子组件业务代码传递给this.loadData() 函数的第一个参数。请求回来后的值继续在callback中进行处理，从而在写法上看上去像同步代码，代码更简单。

并且可将子组件作为一个独立的空间封装起来，需要使用时只需在父组件中命名一个调用数据请求的函数作为值传给子组件即可。