026.Vue3入門，父頁面給子頁面傳遞資料，在子頁面不能修改，只能改自己的data內容

像一棵海草海草海草發表於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 :FatherMsg="msg"/>
</template>

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

export default {
  data() {
    return {
      msg: '父頁面資料！'
    }
  },
  components: {
    Child
  }
}
</script>

3、Child.vue程式碼：

<template>
  <h3>子頁面</h3>
  <button @click="updateFatherHandle">修改父頁面資料</button>
  <p></p>
  <button @click="updateChildHandle">修改子頁面資料</button>
  <p>{{ FatherMsg }}</p>
  <p>{{ ChildMsg }}</p>

</template>

<script>
export default {
  data() {
    return {
      ChildMsg: '子頁面資料！'
    }
  },
  props: {
    //FMsg沒有傳過來，就報錯
    'FatherMsg': {required: true}
  },
  methods: {
    updateChildHandle() {
      this.ChildMsg = '修改子頁面資料！'
    },
    updateFatherHandle() {
      this.FatherMsg = '修改父頁面資料！'
    }
  }
}
</script>

4、效果如下：

相關文章