Vue+TS+子组件回调父组件的方法

历史文章目录连接： https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

子组件回到父组件的方法

正文：

在封装组件的时候，我们可能经常会碰到子组件调用父组件的方法的情况，这种情况非常类似于Java、C#等编程语言中的回调方法或委托。下面我们来记录一下此方式。

创建子组件，命名为Son.vue

<template>
    <div>
        这是一个子组件
        <br>
        <button @click="sonMethod">孩子按钮</button>
    </div>
</template>
<script lang="ts">


export default
{
    props:{
        fatherMethod:{
            type:Function,
            default:null
        }
    },
    methods:{
        sonMethod()
        {
            this.fatherMethod();
        }
    }
}
</script>

在props 中我们声明了一个fatherMethod属性，此属性是Function类型

当我们点击组件中的"孩子按钮"的时候会执行sonMethod() 方法，sonMethod() 方法中会调用声明的fatherMethod() 方法

那么如何调用呢？

调用处的代码：

    <son :fatherMethod="ceShi"> hello </son>

"ceShi"是在父组件中的方法

methods:
{
    ceShi()
    {
        console.log("这是来自你爹的消息");
    }
}

当点击“孩子按钮”的时候，效果如下：

【文章导航】

https://blog.csdn.net/yy763496668/article/details/113117040

Thanks all !!

【关注、点赞，收藏】 关注公众号，您将第一时间收到文章更新 微信公众号：猿媛大本营 QQ群号：1056320746