vue子组件传值给父组件

最新推荐文章于 2025-07-11 10:33:44 发布

前端61

最新推荐文章于 2025-07-11 10:33:44 发布

阅读量880

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： web前端 vue 组件传值子组件传值给父组件

本文链接：https://blog.youkuaiyun.com/qq_43327305/article/details/85846934

vue 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Vue中子组件如何通过this.$emit()方法将数据传递给父组件的具体实现方式。子组件使用@click事件触发sendMsg方法，并通过$emit发送数据；父组件则在接收到数据后更新其data属性。

vue子组件传值给父组件是通过 `this.$emit()`方法实现的

子组件：

<div @click="sendMsg"></div>

data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }

父组件：

<wang-editor class="wangEditor" @func="getContent"></wang-editor>

data() {
    return {
      content: ""
    };
  },
  
methods: {
    // 接收来自子组件的值
    getContent(data) {
      this.content = data;
      console.log(this.content)
    },
}