6.props

只读，子组件不能对收到的props进行修改。如果必须要修改的话：

<template>
  <div class="test-container">
    <h2>{{ myName }}</h2>
    <h2>{{ age }}</h2>
    <button @click="handleClick">change name</button>
  </div>
</template>

<script>
export default {
  name: "testVue",
  data() {
    return {
      myName: this.name // 将prop绑定到子组件的数据上，对子组件的数据进行修改
    }
  },
  props: {
    name: {
      type: String,
      request: true,
    },
    age: {
      type: Number,
      request: false,
      default: 17
    }
  },
  methods: {
    handleClick() {
      if (this.myName === 'muggle') {
        this.myName = 'daye'
      } else if (this.myName === 'daye') {
        this.myName = 'muggle'
      }
    }
  }
}
</script>

props常见面试题

1. props在Vue中如何使用和作用是什么？

   答：props是在Vue中用于父子组件间通信的重要手段，父组件通过props将数据传递给子组件。使用方式是在子组件中声明props，然后在父组件中通过自定义属性的形式传值给子组件。

2. 如何验证props的数据类型？

   答：Vue提供了一个props选项，允许我们给组件传递数据，并为这些数据定义类型和验证规则。如果传入的props数据不符合预期的类型或验证规则，Vue会在开发环境下发出警告。我们可以直接指定props类型，也可以通过对象的方式传入类型和验证。

3. props传递的数据是否可以被子组件修改？

   答：props传递的数据是单向绑定的，也就是说，子组件不应直接修改这些数据。一旦数据被修改，当父组件的原始数据变化时，改变将会被覆盖。Vue这样设计主要是为了保证数据流的一致性和可预见性。

4. 如何在子组件中响应props的改变？

   答：子组件可以通过watch监听props的变化并执行相应的操作，也可以利用computed属性为props生成一个本地值。

5. 如何给props设置默认值？

   答：我们可以在定义props时，通过default字段来为其设定默认值。对于值为对象或数组的props，需要以函数的方式返回默认值，以确保每个实例可以保持一个唯一的默认值。