vue3父子组件通信（父传子）

1、注册两个组件

2、父组件传子组件

父组件:

 子组件

 效果图

 完整例子

父组件

<template>
  <div class="home">
    <!-- 父子组件相传 -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div>我是爸爸</div>

    <!-- 使用组件 -->
     <!-- 父传子 通过 自定义属性 = '值' -->
    <about-view msg="父组件的数据"
    :num="num"
    :list="[10, 20]"
    :obj="{name: '小明'}">

    </about-view>
    <button @click="num++">num++</button>
  </div>
</template>

<script setup>
import {ref} from 'vue'
// 在vue2里面需要引入注册才可以使用，在vue3里面世界引入就可以了
import AboutView from './AboutView.vue';
// import AboutView from './AboutView.vue';
const num = ref(10);
</script>

子组件

<template>
  <div class="about">
    <h1>我是孩子</h1>
    <div>父组件传来的值:{{ msg }}</div>
    <div>数组{{ list }}</div>
    <div>数字{{ num }}</div>
    <div>对象{{ obj }}</div>
    <h1>{{ props.num }}</h1>
  </div>
</template>

<script setup>
// 通过defineProps（全局引用）

// 可以把defineProps的返回值做接收  
const props =  defineProps({
  msg:{
    type: String,
    required: true,
    // default 默认传值 加入每日有传值的话
  },
  list:{
    type: Array,
    required: true
  },
  num:{
    type: Number,
    required: true
  },
  obj:{
    type: Object,
    required: true
  }
})
</script>