vue-test4 -------组件之间的数据传递

<template>
  <h3>CompA</h3>
<component-b :onfun="dateFun"></component-b>
<p>{{msg}}</p>
</template>

<script>
import ComponentB from "@/components/ComponentB.vue";
export default {
  name: "ComponentA",
  components: {ComponentB},
  data(){
    return{
      msg:"a"
    }
  },
  methods:{
    dateFun(data){
      console.log(data)
      this.msg=data
    }
  }
}
</script>

<style scoped>

</style>
<template>
  <p>{{onfun('传递数据')}}</p>>
</template>

<script>
export default {
  name: "ComponentB",
  props:{
    onfun:Function
  }
}
</script>

<style scoped>

</style>
posted @ 2023-11-08 22:23  会秃头的小白  阅读(4)  评论(0编辑  收藏  举报