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