vue3组件通信Props()

vue3组件通信

父传子

defineProps()

在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：

//父
<HelloWorld msg="You did it!" />
  <!-- 根据一个变量的值动态传入 -->
//<BlogPost :title="post.title" />

//子
<script setup>
 //写法1
   defineProps({
    msg: {
      type: String,
      required: true
    }
//或
// defineProps(['msg'])
//写法2
//const props = defineProps(['msg'])
//console.log(props.msg)
  })
</script>
<template>
     <h1 class="green">{{ msg }}</h1>
</template>

TypeScript 使用 <script setup>

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

 props

在没有使用 <script setup> 的组件中，prop 可以使用 props 选项来声明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

Prop 校验

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认，这不是一个
    // 工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})