【转】[Vue] props 介绍

转自：kimi.com

在Vue.js中，props 是组件之间通信的一种方式，用于将数据从父组件传递到子组件。props 是子组件接收父组件传递的数据的接口，使得子组件可以接收并使用父组件提供的数据。以下是props的主要作用和使用场景：

1. 数据传递

props 允许父组件将数据传递给子组件，使得子组件可以使用这些数据来渲染内容或执行逻辑。

示例：

子组件（ChildComponent.vue）

vue复制

<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

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

父组件

vue复制

<template>
  <div>
    <ChildComponent :name="user.name" :age="user.age" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

在这个例子中，父组件通过<ChildComponent>标签的name和age属性将数据传递给子组件，子组件通过props接收这些数据并渲染。

2. 类型检查

props 允许你定义数据的类型，Vue.js会在运行时进行类型检查，如果传递的数据类型不匹配，会发出警告。

示例：

vue复制

props: {
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 0
  }
}

在这个例子中，name属性被定义为字符串类型且是必传的，age属性被定义为数字类型且有一个默认值0。

3. 默认值

props 允许你为每个属性指定一个默认值，如果父组件没有传递该属性，子组件将使用默认值。

示例：

vue复制

props: {
  name: {
    type: String,
    default: '默认姓名'
  },
  age: {
    type: Number,
    default: 18
  }
}

在这个例子中，name和age属性都有默认值，如果父组件没有传递这些属性，子组件将使用默认值。

4. 验证

props 允许你定义自定义验证规则，确保传递的数据符合特定的条件。

示例：

vue复制

props: {
  age: {
    type: Number,
    validator: function(value) {
      return value >= 0;
    }
  }
}

在这个例子中，age属性的验证规则确保传递的值必须是非负数。

5. 单向数据流

props 遵循单向数据流的原则，即数据只能从父组件流向子组件。子组件不能直接修改props的值，如果需要修改，应该通过事件通知父组件进行修改。

示例：

子组件（ChildComponent.vue）

vue复制

<template>
  <div>
    <p>姓名: {{ name }}</p>
    <button @click="updateName">更新姓名</button>
  </div>
</template>

<script>
export default {
  props: {
    name: String
  },
  methods: {
    updateName() {
      this.$emit('update:name', 'Jane Doe');
    }
  }
};
</script>

父组件

vue复制

<template>
  <div>
    <ChildComponent v-model:name="user.name" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    };
  }
};
</script>

在这个例子中，子组件通过$emit触发一个事件来通知父组件更新name属性的值，父组件通过v-model:name绑定了name属性，从而实现了数据的双向绑定。

总结

props在Vue.js中是实现组件间通信的重要机制，允许父组件将数据传递给子组件，并通过类型检查、默认值、验证等功能确保数据的正确性和一致性。同时，props遵循单向数据流的原则，确保数据的流向清晰和可控。