vue3梳理小荣荣组件

<template>
<div class="bg">
    <h2>{{title}}</h2>
    <h2>{{age}}</h2>
</div>
  
</template>


<script lang="ts">
import {defineComponent,reactive,toRefs}from 'vue';

 export default  defineComponent({
     setup(props,context){
         let data = {
           ...props
         }
         const data2 = reactive(data)
         return {
             ...toRefs(data2)
         }
     },
     props:{
           title:{
               type:String,
               required:true
           },
            age:{
                   type:Number,
                   default:18 
            }
     }
 })
</script>

<style>
    .bg {
        background:#CCC;
    }
</style>

上面是rongrong.vue ,需要接受俩属性

使用和我门原来vue2 一样

在App.vue 

2, 注册局部组件，

3，使用，

 

父子组件传值，用属性传值！

愿所有的都快乐安康，

本节重点，我给大家截图下：

 

setup 形参，可以接受props 的值 ，这点要知道，后面的context 相当于 以前vue2 的this指针！