利用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>
相关推荐
optiz7 分钟前
细菌基因组genome二代测序数据分析
linux·运维·服务器
跟橙姐学代码10 分钟前
Python异常处理:告别程序崩溃,让代码更优雅!
前端·python·ipython
niuhuahua12 分钟前
大屏拖拽功能,配合ai组件使用,配合各个组件都可使用
前端
得物技术27 分钟前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
m0_6613162327 分钟前
modbus_tcp和modbus_rtu对比&移植AT-socket,modbus_tcp&杂记
服务器·网络·tcp/ip
渣哥28 分钟前
Java 集合框架详解:常见集合类及分类方式
java
陶甜也30 分钟前
threeJS 实现开花的效果
前端·vue·blender·threejs
用户76787977373231 分钟前
后端转全栈之Next.js 路由系统App Router
前端·next.js
OEC小胖胖32 分钟前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
yinke小琪39 分钟前
消息队列如何保证消息顺序性?从原理到代码手把手教你
java·后端·面试