023.Vue3入门，父页面给子页面传递数据

1、App.vue代码如下：

<template>
  <Father/>
</template>

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

<style>
</style>

2、Father.vue代码如下：

<template>
  <h3>父页面</h3>
  <Child :title="msg"/>
</template>

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

export default {
  data() {
    return {
      msg: '父页面数据！'
    }
  },
  components: {
    Child
  }
}
</script>

<style scoped>

</style>

3、Child代码如下：

<template>
  <h3>子页面</h3>
  <p>{{ title }}</p>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['title']
}
</script>


<style scoped>

</style>

4、效果如下：