利用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>
相关推荐
写bug写bug2 分钟前
Java并发编程:优雅的关闭钩子(Shutdown Hook)
java·后端
啊波次得饿佛哥10 分钟前
在winform中使用chromiumWebBrowser显示Echarts图表
前端·javascript·echarts·winform·cefsharp
码熔burning32 分钟前
【MQ篇】RabbitMQ之消费失败重试!
java·分布式·rabbitmq·mq
桃花岛主7032 分钟前
NAT穿透
服务器·网络·智能路由器
秋天的一阵风40 分钟前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html
秋天的一阵风44 分钟前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
Haoea!1 小时前
java-mybatis01
java·数据库·oracle
zandy10111 小时前
衡石科技:HENGSHI SENSE 数据权限解决方案
java·数据库·科技
Coffeeee1 小时前
重新开始学Threejs,了解一下里面的一些高级几何体
前端·typescript·three.js
学编程的小程1 小时前
Spring MVC深度解析:从原理到实战
java·spring·mvc