Vue------Props传值的相关操作以及总结说明

 

❤ prop参数的所有类型列举：

❤ 以字符串数组形式列出的 prop：

❤ 以指定类型列出的 prop：

❤ Prop 验证: 各种形式的prop参数列举

❤  Prop 的大小写命名 (camelCase vs kebab-case):

---

❤ prop参数的所有类型列举：

// 引用类型的话,默认值要为函数返回值的形式!!!
1.String 2.Number 3.Boolean 4.Array 5.Object 6.Date 7.Function 8.Symbol

❤ 以字符串数组形式列出的 prop：

// 这种表示一般用于简单的静态传值:比如只是一个标题,或者一段文字
props: ['title', 'likes', 'isPublished', 'commentIds', 'author'],

❤ 以指定类型列出的 prop：

props: {
	title: String,
	likes: Number,
	isPublished: Boolean,
	commentIds: Array,
	author: Object,
	callback: Function,
	contactsPromise: Promise // 或任何其他构造函数
}

❤ Prop 验证: 各种形式的prop参数列举

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

❤  Prop 的大小写命名 (camelCase vs kebab-case):

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。

1.使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名;
2.如果你使用字符串模板，那么这个限制就不存在了

简单说就是: 子组件中prop名字: postTitle => 组件上的Dom中使用就(:post-title="value")传值才可以