vue中props的使用

Question

请问props在vue3中常用吗,什么场景用啊,现在跟上尚硅谷的vue3学习但是vue学的很模糊

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

回答

你好，Vue3中Props仍然是非常重要的概念。Props是父组件向子组件传递数据的方式，子组件可以通过Props接收父组件传递的数据。

场景

Props常用于以下场景：

• 父组件需要传递数据给子组件
• 子组件需要从父组件获取数据
• 父组件需要控制子组件的行为

示例代码

// 父组件
<template>
  <div>
    <child :name="name" :age="age" />
  </div>
</template>

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

export default {
  components: { Child },
  data() {
    return {
      name: 'John',
      age: 30
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  }
}
</script>

注意

在Vue3中，Props的类型检查更加严格，需要使用@Prop装饰器来定义Props的类型。

import { Prop } from 'vue-property-decorator'

export default class Child extends Vue {
  @Prop({ type: String, required: true }) name!: string
  @Prop({ type: Number, default: 0 }) age!: number
}

希望这个示例能够帮助你更好地理解Vue3中的Props！