Vue3 父组件通过 props 传值给子组件

一、概述

父组件传值到子组件，通过 props 的方式

二、步骤

2.1 子组件

<template>
  <h2>父组件传来的数据  {{ msg }} </h2>
</template>

<script>
import { defineComponent } from "@vue/runtime-core"

export default defineComponent({
    name: 'StudyProp',
    props: ['msg'] // 从父组件接收到 msg 属性
})

2.2 父组件

value 表示传递的值，可以是其他类型，包括对象等。

<template>
  <StudyProp :msg="value" />
</template>

<script>
import StudyProp from "./components/StudyProp.vue"

import { ref, defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {
    StudyProp
  },
  setup(){
      const value = ref("abc");
      return {
          value
      }
  }
})
</script>  

2.3 结果