Vue：Props简介和基本使用

在Vue中，props是父组件与子组件通信的桥梁。props是你可以在组件上定义的一些自定义特性。当你在组件上声明了一个prop时，就可以在其父组件中使用它。

以下是Vue中props的基本使用方法：

1. 在子组件中声明props：

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

2. 在父组件中使用子组件，并绑定props：

<my-component message="Hello, Vue!"></my-component>

3. 传递动态数据：

<my-component :message="parentMessage"></my-component>

data() {
  return {
    parentMessage: 'Hello, Vue!'
  }
}

4. 验证props：

Vue允许你为组件的props指定验证规则。这是通过一个特殊的props选项实现的，它是一个对象，其中每个键值对分别定义了一个prop名称和这个prop的验证规则。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的对象
    propD: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propE: {
      validator: function (value) {
        return value > 10
      }
    }
  }
  // ...
})

5. 单向数据流：

Vue强制了单向数据流，prop是只读的，不应该在子组件内部改变它。如果需要改变，应该使用事件通知父组件进行改变。

Vue.component('my-component', {
  props: ['message'],
  template: '<div @click="notifyParent">{{ message }}</div>',
  methods: {
    notifyParent() {
      this.$emit('changeMessage', 'new message');
    }
  }
})

<my-component :message="parentMessage" @changeMessage="parentMessage = $event"></my-component>

以上是Vue中props的基本介绍和使用方法，实际使用时应根据具体情况选择合适的prop验证规则和使用方式。