vue3setup语法糖prop父传子

在 Vue3 的 setup 函数中，如果需要进行父组件向子组件传值，可以使用 prop 语法糖。

在子组件中，可以使用 defineProps 函数来定义需要接收的 props，如下所示：

import { defineProps } from 'vue'

export default {
  props: {
    msg: String
  },
  setup(props) {
    // 使用 props.msg 进行操作
  }
}

在父组件中，可以直接将需要传递的值作为子组件的属性进行传递，如下所示：

<template>
  <ChildComponent msg="Hello World" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

这样，在子组件中，就可以通过 props.msg 来获取父组件传递的值了。如果需要进行类型检查，可以使用 defineProps 函数来定义 props 的类型和默认值。例如：

import { defineProps } from 'vue'

export default {
  props: {
    msg: String
  },
  setup(props) {
    // 使用 props.msg 进行操作
  }
}

// 使用 defineProps 进行类型检查
const props = defineProps({
  msg: {
    type: String,
    default: 'Hello World'
  }
});