029.Vue3入门，父页面自定义Event传给子页面，子页面通过此Event回传数据给父页面

1、App.vue代码：

<template>
  <Father/>
</template>

<script setup>
import Father from './view/Father.vue'
</script>

<style>
</style>

2、Father代码如下：

<template>
  <h3>父页面</h3>
  <p>搜索内容为: {{ msg }}</p>
  <Child title="标题" :onEvent="dataFn"/>
</template>

<script>
import Child from './Child.vue';

export default {
  data() {
    return {
      msg: ''
    }
  },
  components: {
    Child
  },
  methods: {
    dataFn(data) {
      console.log('子页面传过来：', data);
      this.msg = data;
    }
  }
}
</script>

3、Child.vue代码：

<template>
  <h3>子页面</h3>
  <div>{{ title }}</div>
  <div>{{ onEvent('我是子页面数据！') }}</div>
</template>

<script>
export default {  
  data() {
    return {}
  },
  props: {
    title: String,
    onEvent: Function,
  },
}
</script>

3、效果如下：