vue3的新写法和特性整理——四、子父组件之间传值

只贴出了vue3中新的子父组件传值，V3兼容老的写法就不再赘述
1、父组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<template>   <div class="home">     <h1>父组件</h1>     <img alt="Vue logo" src="../assets/logo.png" />     <HelloWorld :msg="msg" />   </div> </template>   <script> import { reactive, toRefs } from 'vue'; import HelloWorld from "@/components/HelloWorld"; export default {   setup() {     const state = reactive({       msg: '父组件传值'     });       return {       ...toRefs(state)     };   },   name: 'Home',   components: {HelloWorld}, }; </script>   <style scoped> .home {   color: red;   border: 1px solid red; } </style>

　　2、子组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<template>   <div class="hello">     <h1>子组件</h1>     <h1>{{ msg }}</h1>   </div> </template>   <script> import { toRefs } from 'vue'; export default {   setup(props) {     console.log(props);     return {       ...toRefs(props)     };   },   name: 'HelloWorld',   props: {     msg: String   } }; </script>   <style scoped> .hello {   margin: 20px;   color: green;   border: 1px solid green; } </style>

　　
setup函数的第一个参数能取到父组件的传值，然后在函数中返回  toRefs(props) 的结构即可

 效果图