利用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>
相关推荐
YongGit2 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
述雾学java2 分钟前
Spring Cloud Feign 整合 Sentinel 实现服务降级与熔断保护
java·spring cloud·sentinel
保持学习ing3 分钟前
苍穹外卖day3--公共字段填充+新增菜品
java·阿里云·实战·springboot·前后端·外卖项目·阿里云文件存储
胡斌附体13 分钟前
linux测试端口是否可被外部访问
linux·运维·服务器·python·测试·端口测试·临时服务器
77qqqiqi21 分钟前
正则表达式
java·后端·正则表达式
大锦终23 分钟前
【Linux】常用基本指令
linux·运维·服务器·centos
慧一居士39 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
厦门德仔1 小时前
【WPF】WPF(样式)
android·java·wpf
大春儿的试验田1 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
知北游天1 小时前
Linux:多线程---深入互斥&&浅谈同步
linux·运维·服务器