Vue3父传子

父：

<script setup>
  import { reactive } from 'vue';
  import Header from './components/header.vue';//导入组件首字母大写
  import Footer from './components/footer.vue';
  const propsweb = reactive({
        propsUser:10,
        propsUrl:"www.baidu.cn"
      })
   const userAdd = ()=>{
      propsweb.propsUser++
   }
</script>

<template>
  <Header propsName="Hai" propsUrl="www.baidu.com" />
  <Footer :="propsweb" :userAdd2="userAdd"/>
</template>

Header通过数组接收

<script setup>
//父传子
    const props = defineProps([
        "propsName",
        "propsUrl"
    ])
    console.log(props);
</script>

<template>
    <h3>Header-{{ propsName }}-{{ propsUrl }}</h3>
</template>

Header通过对象接收

<script setup>
   const props = defineProps({
        propsUser:Number,
        propsUrl : {
            type:String,
            require:false,
            default:"www.163.com"

        },
        // 函数类型的默认值
        userAdd2: {
            type: Function,//函数类型
        }
    })
</script>

<template>
    <h3>Footer</h3>
    <button @click="userAdd2">增加用户</button>  {{ propsUser }}
</template>