026.Vue3入门，父页面给子页面传递数据，在子页面不能修改，只能改自己的data内容

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、效果如下：