023.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 :title="msg"/> </template> <script> import Child from './Child.vue' export default { data() { return { msg: '父页面数据!' } }, components: { Child } } </script> <style scoped> </style>
3、Child代码如下:
<template> <h3>子页面</h3> <p>{{ title }}</p> </template> <script> export default { data() { return {} }, props: ['title'] } </script> <style scoped> </style>
4、效果如下: