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>