Vue中props对象的用法

2023-12-03 15:22:30

Vue中props对象的用法

在Vue中，props对象是一个特殊的对象，它用于在组件之间传递数据。props对象是一个JavaScript对象，它的属性名是组件可以接收的属性名，属性值是组件可以接收的属性值。

要使用props对象，需要在组件的定义中声明props对象。props对象可以是组件的选项对象的一个属性，也可以是组件的构造函数的一个属性。

// 在组件的选项对象中声明props对象
Vue.component('my-component', {
  props: {
    // 组件可以接收的属性
    name: {
      type: String,
      required: true,
      default: 'World'
    },
    age: {
      type: Number,
      required: false,
      default: 0
    }
  }
});

// 在组件的构造函数中声明props对象
class MyComponent extends Vue {
  constructor(props) {
    super(props);

    // 组件可以接收的属性
    this.name = props.name;
    this.age = props.age;
  }
}

props对象的属性

props对象可以包含以下属性：

type: 属性的类型。可以是基本类型，也可以是对象或数组。
required: 属性是否必填。
default: 属性的默认值。
validator: 属性值的验证函数。

props对象的用法示例

// 定义一个组件，该组件接收一个名为name的字符串属性和一个名为age的数字属性
Vue.component('my-component', {
  props: {
    name: {
      type: String,
      required: true,
      default: 'World'
    },
    age: {
      type: Number,
      required: false,
      default: 0
    }
  },
  template: '<p>Name: {{ name }}, Age: {{ age }}</p>'
});

// 在父组件中使用my-component组件
new Vue({
  el: '#app',
  template: '<my-component name="John" age="30"></my-component>'
});