【vue】子组件向父组件传递数据

最新推荐文章于 2025-06-21 02:43:05 发布

doctorcs-w

最新推荐文章于 2025-06-21 02:43:05 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_40587085/article/details/88651823

vue 专栏收录该内容

0 篇文章

订阅专栏

本文介绍Vue框架中子组件如何使用this.$emit方法向父组件传递数据，包括详细步骤和实例代码，帮助理解父子组件间的通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中子组件向父组件中传递数据方法 this.$emit.(“方法名”，“第一个参数”，“第二个参数”)

废话少说，上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../视频教程/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id="root">
        <!-- 子组件 -->
        <tk v-on:click-fun = "changeFun"></tk>
    </div>

    <!-- 子组件模板 -->
    <script type="text/x-Template" id="tkTpl">
        <input type="button" value="弹窗" @click="alertMsg">
    </script>
    <script>
       
       var tkTpl = {
           template: "#tkTpl",
           methods: {
                alertMsg() {
					this.$emit('click-fun',"abc","def");
                    alert("子组件触发click事件");
					// 触发clickFun事件
                }
           }

       }

        var vm = new Vue({
            el: "#root",
            components: {
                tk: tkTpl,
            },
            methods: {
                changeFun(arg1, arg2) {
                    alert("我被触发了");
                    console.log(arg1);
                }
            }
        })
    </script>
</body>
</html>