vue子组件给父组件传值，即父组件监听子组件($emit)

最新推荐文章于 2025-10-20 23:24:38 发布

原创最新推荐文章于 2025-10-20 23:24:38 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍如何在Vue项目中实现子组件向父组件的数据传递过程，包括定义子组件、添加状态值与点击事件、使用$emit触发事件及父组件接收处理等步骤。

1、准备：cdn引入vue框架，画一个页面渲染区域，实例化一个vue并指定渲染区域。

<!-- 引入vue框架 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
              
    </div>

let app = new Vue({
        el: "#app",//最大的组件 根组件
        data: {
            
        },
})

2、定义一个子组件，引用子组件。

// 自定义一个全局组件
    // 第一个参数-组件名称 (名字不能是小驼峰，是小写字母-小写字母)
    // 第二个参数-配置
    Vue.component("button-component", {
        // 状态值:要求状态对应一个组件的实例
        data(){
            return {
                
            }
        },
        // 组件的模板：必须要用一个div包括起来
        template:`<div>
            
        </div>`,
    })

<div id="app">
        <!-- 在根组件里使用自定义组件 -->
        <button-component></button-component>      
    </div>

3、在子组件状态值data里面添加要传递的值，并在模板里添加一个按钮绑定点击事件用来触发值传递事件。

data(){
            return {
                name:"hehe",
            }
        }

 template:`<div>
            {{name}}
            <button @click="toParent">传值</button>
        </div>`

4、在子组件的方法中写子组件模板中按钮绑定的事件内容-即使用$emit方法把值传递给父组件。注意这里的this指的是子组件，传递事件是changenum(自定义名字，不能驼峰命名)。

methods: {
            // 子组件通过$emit调用父组件中的方法
            // $emit只能在子组件中使用
            // 将组件中的count传递到父组件中
            toParent() {
                // 触发changenum事件，传递count值
                this.$emit("changenum",this.name)
            }
        }

5、在引用子组件标签中添加@changenum="changeInfo"把changenum事件传递出去，changeInfo是父组件中定义来接值的方法。

<button-component @changenum="changeInfo"></button-component>

6、在父组件的状态值中定义一个状态值，并在方法中定义changeInfo方法去处理传递的值。

data: {
            appname:''
        }

methods: {
            // 响应子组件触发的changenum事件
            // 参数：分别接受子组件中$emit传递过来的参数
            changeInfo(val1){
                this.appname=val1;
            }
        }

7、在父组件中引用状态值appname,运行看效果。