利用props实现子传父组件

App.vue

html 复制代码
<template>
<componentA/>
</template>
<script>
import componentA from './components/componentA.vue';
export default{
  components:{
    componentA
  }
}
</script>

componentA.vue

html 复制代码
<template>
    <div>
        <h3>ComponetA</h3>
        <p>父元素:{{ message }}</p>
        <!-- 自定义函数是父组件的dataFn勇于接收子组件onEvent传递的参数 -->
<componentB title="标题" :onEvent="dataFn"/>
    </div>
</template>
<script>
import componentB from './componentB.vue';
export default{
    data(){
        return{
            message:""
        }
    },
  components:{
    componentB
  },
  methods:{
    dataFn(data){
      // 父组件接收子组件传递过来的数据
        this.message=data
    }
  }
}
</script>

componentB.vue

html 复制代码
<template>
    <div>
        <h3>componentB</h3>
        <p>{{ title }}</p>
        <!-- 这个'传递数据'是子组件传给父组件的数据 -->
        <p>{{ onEvent('传递数据') }}</p>
    </div>

</template>
<script>
export default{
    data(){
        return{

        }
    },
    // 接收父组件的数据
    props:{
        title:String,
        onEvent:Function
    }
}
</script>
相关推荐
武子康17 分钟前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
caolib40 分钟前
无需云服务器的内网穿透方案 -- cloudflare tunnel
运维·服务器·内网穿透·tunnel·cloudflared
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
誰能久伴不乏1 小时前
Linux系统调用概述与实现:深入浅出的解析
linux·运维·服务器
程序员学习随笔1 小时前
Linux进程深度解析(2):fork/exec写时拷贝性能优化与exit资源回收机制(进程创建和销毁)
linux·运维·服务器
-SGlow-2 小时前
MySQL相关概念和易错知识点(2)(表结构的操作、数据类型、约束)
linux·运维·服务器·数据库·mysql
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
代码改变世界ctw2 小时前
Linux内核设计与实现 - 第14章 块I/O层
linux·运维·服务器
Dreams_l3 小时前
网络编程2(应用层协议,传输层协议)
运维·服务器·网络