利用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>
相关推荐
吃饺子不吃馅13 分钟前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
wshzrf15 分钟前
【Java系列课程·Java学前须知】第3课 JDK,JVM,JRE的区别和优缺
java·开发语言·jvm
铅笔侠_小龙虾18 分钟前
JVM 深入研究 -- 详解class 文件
java·开发语言·jvm
聪明的笨猪猪18 分钟前
面试清单:JVM类加载与虚拟机执行核心问题
java·经验分享·笔记·面试
韶光流年都束之高阁33 分钟前
Java中的TCP与UDP
java·tcp/ip·udp
练习时长一年37 分钟前
ApplicationContext接口实现(二)
java·开发语言
余防1 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump1 小时前
前端部署工具 PinMe
运维·前端·开源
闲人编程1 小时前
深入理解Python的`if __name__ == ‘__main__‘`:它到底做了什么?
服务器·数据库·python·main·name·魔法语句
Baklib梅梅1 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby