【Vue】props默认值类型有哪些

目录

基本使用

默认值与类型指定

支持的类型

常用类型单独举例

字符串类型

数字类型

布尔类型

对象类型

数组类型

函数类型

综合代码示例

经常遇到的问题

类型不匹配

修改 Props

传递静态或动态 Props

注意事项

单向数据流

Prop 名大小写

默认值为对象或数组

验证 Props**

不要使用箭头函数在 `default` 中返回默认值

---

在Vue中，props的默认值类型可以是字符串、数字、布尔、对象、数组或函数。

在 Vue.js 中，组件之间的数据传递主要依赖于 `props`。`props` 是父组件用来传递数据给子组件的自定义属性。

基本使用

子组件定义 `props`：

Vue.component('child-component', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
});

父组件使用该子组件并传递 `props`：

<child-component message="Hello from parent!"></child-component>

默认值与类型指定

你可以为 `props` 指定类型和默认值：

Vue.component('child-component', {
  props: {
    message: {
      type: String,
      default: 'Default message'
    }
  },
  template: '<span>{{ message }}</span>'
});

支持的类型

`props` 的类型可以是以下几种：

• - `String`
• - `Number`
• - `Boolean`
• - `Array`
• - `Object`
• - `Date`
• - `Function`
• - `Symbol`

常用类型单独举例

字符串类型

props: {
  title: {
    type: String,
    default: 'Hello'
  }
}

数字类型

props: {
  count: {
    type: Number,
    default: 0
  }
}

布尔类型

props: {
  isActive: {
    type: Boolean,
    default: false
  }
}

对象类型

props: {
  user: {
    type: Object,
    default: function() {
      return { name: 'John', age: 20 }
    }
  }
}

//简写

props: {
  user: {
    type: Object,
    default: () =>  { name: 'John', age: 20 },
  }
}

数组类型

props: {
  colors: {
    type: Array,
    default: function() {
      return ['red', 'blue', 'yellow']
    }
  }
}

//简写 

props: {
  colors: {
    type: Array,
    default:  () => ['red', 'blue', 'yellow'],
  }
}

//默认值值不要直接加[],  记得前面加上  () => 

函数类型

props: {
  fetchData: {
    type: Function,
    default: function() {
      return axios.get('/api/data')
    }
  }
}

请注意，上述示例中的default属性定义了props的默认值。

综合代码示例

Vue.component('blog-post', {
  props: {
    title: String,
    likes: {
      type: Number,
      default: 0
    },
    isPublished: {
      type: Boolean,
      default: false
    },
    commentIds: Array,
    author: Object,
    callback: Function,
    contacts: {
      type: Map,
      default: function () {
        return new Map();
      }
    }
  },
  template: '<h3>{{ title }}</h3>'
});

// 使用组件
<blog-post
  :title="'Vue Props'"
  :likes="42"
  :is-published="true"
  :comment-ids="[234, 266, 273]"
  :author="{ name: 'Vue Ninja' }"
  :callback="myMethod"
></blog-post>

经常遇到的问题

类型不匹配

当传递给 `props` 的数据类型不符合定义时，Vue 会在控制台发出警告。

修改 Props

子组件不应直接修改 `props` 中的数据。如果需要修改，应该定义一个本地的 `data` 属性或计算属性。

传递静态或动态 Props

静态值直接传递，动态值需要使用 `v-bind` 或简写 `:`。

注意事项

单向数据流

`props` 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意间修改了父组件的状态。

Prop 名大小写

HTML 中的属性名是不区分大小写的，因此，当使用非字符串模板时，camelCased（驼峰命名法）的 `props` 名需要使用其 kebab-cased（短横线隔开命名）等价值。

默认值为对象或数组

默认值应该使用一个函数来返回对象或数组，以避免多个实例共享同一个数据对象。

验证 Props**

可以为 `props` 提供一个带有验证需求的对象，以确保接收到的数据符合预期。

不要使用箭头函数在 `default` 中返回默认值

因为箭头函数绑定父级上下文，所以 `this` 不会按照期望指向 Vue 实例，应使用普通函数。

通过遵循这些指导原则和最佳实践，你可以有效地使用 `props` 在 Vue 组件之间传递信息，确保组件体系结构的清晰和数据流的正确性。

有用请点赞，养成良好习惯！

鼓励、交流、疑问请留言！