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