利用props实现子传父组件

LXY202305042025-03-01 16:28

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>