024.Vue3入門，父頁面給子頁面傳遞多種資料

像一棵海草海草海草發表於2024-08-11
Vue

1、App.vue程式碼如下：

<template>
  <Father/>
</template>

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

<style>
</style>

2、Father.vue程式碼如下：

<template>
  <h3>父頁面</h3>
  <Child :FMsg="msg" :FAge="age" :FName="name" :FUserInfo="userInfo"/>
</template>

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

export default {
  data() {
    return {
      msg: '父頁面資料！',
      age: 18,
      name: ['張三', '李四', '王五'],
      userInfo: {
        name: '張三',
        age: 18,
        sex: '男'
      }
    }
  },
  components: {
    Child
  }
}
</script>

<style scoped>

</style>

3、Child.vue程式碼如下：

<template>
  <h3>子頁面</h3>
  <p>{{ FMsg }}</p>
  <p>{{ FAge }}</p>
  <p>{{ FName }}</p>
  <p>{{ FUserInfo }}</p>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['FMsg', 'FAge', 'FName', 'FUserInfo']
}
</script>


<style scoped>

</style>

4、效果如下：

相關文章