526互联

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

发布时间 2023-11-09 09:43:43作者: 林浅
<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>