父子组件之间传递Function,在vue组件中callback的应用

最新推荐文章于 2024-01-08 15:35:13 发布

吃瓜群众欢乐多

最新推荐文章于 2024-01-08 15:35:13 发布

阅读量5.1k

点赞数 3

分类专栏：前端 VUE

本文链接：https://blog.csdn.net/sinat_36146776/article/details/97397001

版权

VUE 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

在用element,
'el-autocomplete’这个组件时我看到有一种cb的方法，又get到一点知识点，
平时使用中父子组件传参一般都是Object,Array,Boolean,String类型，如果想要传递Function，并且保证他们之间的通信如何做到呢？

法一、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传递Function</title>
</head>
<body>
<div id="app">
    {{data}}
    <vue-callback :callback-fun="returnFunction"/>
</div>
<script src="../asserts/js/vue.min.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                data:'callback function'
            }
        },
        components:{
            'vue-callback':{
                name: 'vue-callback',
                template: `<div class="component" @click="broadCast('broadCast')">
                            点击我组件向父组件传递function,父组件处理后返回给子组件数据</div>`,
                props:{
                    callbackFun:Function //通过props传递Function组件
                },
                methods: {
                    broadCast(str){
                        console.log("step1:"+str);
                        //调用callbackFun函数
                        this.callbackFun(str,(callback=>{
                            //callback接收到父组件传递的参数后，会执行此函数
                            console.log("step3:"+callback)
                        }))
                    }
                }
            }
        },
        methods: {
            returnFunction(str,cb){
                console.log("step2:"+"returnFunction")
                cb('callback');//传递给子组件
            }
        }

    });
    //result 
    //step1:broadCast
    //step2:returnFunction
    //step3:callback
</script>
</body>
</html>

法二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <vue-callback @callback-fun="transFun"/>
</div>
<script src="../asserts/js/vue.min.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        components:{
            'vue-callback':{
                template:`<div><div @click="clickFun">点击我发生故事</div></div>`,
                methods: {
                    clickFun(){
                        console.log('step1:$emit');
                        this.$emit("callback-fun",{
                            params:{
                                name:'jane'
                            },
                            callback(value, index, array) {
                                console.log(`step4: 回调执行函数`)
                                console.log(value());
                            }
                        })
                    }
                }

            }
        },
        methods:{
            transFun(obj){
                console.log("step2:")
                console.log(obj);
                console.log("step3:调用callback,传入参数");
                obj.callback(
                    function () {
                        console.log("function");
                        return 'fun'
                    }
                )
            }
        }
    })
</script>
</body>
</html>
    // step1:$emit
    // step2:
    // {params: {…}, callback: ƒ}
    // step3:调用callback,传入参数
    // step4: 回调执行函数
    // function
    // fun
</script>
</body>
</html>