子组件调用父组件的方法并传递数据

简介: 子组件调用父组件的方法并传递数据

$emit 子组件

<template>
  <button @click="emitEvent">点击我</button>
</template>
<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
      }
    }
  }

父组件

<template>
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    <!--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值-->
  </div>
</template>
<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg){
          console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
      }
    }
  }
</script>

在小程序中可以体验

微信小程序搜:红旗头像制作

相关文章
|
Kubernetes Java Docker
Java程序在K8S容器部署CPU和Memory资源限制相关设置
背景 在k8s docker环境中执行Java程序,因为我们设置了cpu,memory的limit,所以Java程序执行时JVM的参数没有跟我们设置的参数关联,导致JVM感知到的cpu和memory是我们k8s的work node上的cpu和memory大小。
9115 0
|
数据采集 传感器 监控
如何在LabVIEW中使用FPGA模块
如何在LabVIEW中使用FPGA模块
690 1
|
Linux Shell 数据库
Linux下如何查找文件或目录
Linux使用find命令、locate命令、grep命令、whereis命令查找文件或目录。
1913 0
|
存储 Java
Java 11 的String是如何优化存储的?
本文介绍了Java中字符串存储优化的原理和实现。通过判断字符串是否全为拉丁字符,使用`byte`代替`char`存储,以节省空间。具体实现涉及`compress`和`toBytes`方法,前者用于尝试压缩字符串,后者则按常规方式存储。代码示例展示了如何根据配置决定使用哪种存储方式。
280 1
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
560 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
SQL 消息中间件 分布式计算
大数据-130 - Flink CEP 详解 - CEP开发流程 与 案例实践:恶意登录检测实现
大数据-130 - Flink CEP 详解 - CEP开发流程 与 案例实践:恶意登录检测实现
355 0
|
存储 自然语言处理 编译器
C语言中的char类型
C语言中的char类型
3449 1
|
SQL Oracle 关系型数据库
Hive中的DECIMAL类型
Hive中的DECIMAL类型
793 1
|
数据安全/隐私保护
基于AutoJs实现的薅羊毛App专业版源码大分享---更新啦
基于AutoJs实现的薅羊毛App专业版源码大分享---更新啦
420 0
|
城市大脑 人工智能 监控
如何谋求新的业务机会点?回归市场,探寻数字化新解
如何谋求新的业务机会点?回归市场,探寻数字化新解
511 0