vue3中props传值

在Vue3中，使用props传递值的方法与Vue2基本相同，但有一些细微的变化。

1. 定义props

在组件的选项中定义props属性，可以接收一个数组或对象，数组中的每个元素表示一个props属性，对象中的每一个属性表示一个props属性。

数组形式：

<script>
export default {
  props: ['propName1', 'propName2']
}
</script>

对象形式：

<script>
export default {
  props: {
    propName1: {
      type: String,
      default: 'default value'
    },
    propName2: {
      type: Number,
      required: true
    }
  }
}
</script>

2. 父组件传值

在父组件中使用子组件时，可以通过在子组件标签中添加对应的属性来向子组件传递值，属性的名称对应子组件props中定义的属性名，属性的值为传递的值。

<template>
  <child-component
    :propName1="value1"
    :propName2="value2"
  ></child-component>
</template>

3. 子组件接收值

在子组件中，可以通过在组件选项中的props属性中定义的属性名来接收传递的值。

<script>
export default {
  props: {
    propName1: {
      type: String,
      default: 'default value'
    },
    propName2: {
      type: Number,
      required: true
    }
  },
  mounted() {
    console.log(this.propName1, this.propName2)
  }
}
</script>

通过以上三个步骤，就可以在Vue3中使用props传递值了。