vue中关于prop

Posted 2020-12-31 czy960731

组件之间的项目通信在vue中十分常见，父组件的数据传到子组件需要prop的支持，我们来看下prop

1.html的特性名大小写不敏感，浏览器会把所有大写字母解释为小写字母，使用dom模板时，使用等价的kabad-case命名

Vue.component(‘blog-post‘, {
  // 在 javascript 中是 camelCase 的
  props: [‘postTitle‘],
  template: ‘<h3>{{ postTitle }}</h3>‘
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

2.prop的类型    prop可以在父组件引入的时候传入很多类型的值

常见的是字符串数组形式

props: [‘title‘, ‘likes‘, ‘isPublished‘, ‘commentIds‘, ‘author‘]

但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。

3.静态传值和动态传值

直接传一句话，或者使用v-bind绑定一个属性名，动态赋值，具体可以参考官网。

4.单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这是官方的解释，我自己写demo试了一下，如果是基础类型，比如Number、String这些类型，在子组件中修改值，修改成功，但是vue发出警告，因为是单向数据流，所以父组件的值不会改变。如果是引用类型数组和对象，vue没有警告，子组件和父组件的值同时发生改变。

5.prop验证

Vue.component(‘my-component‘, {
  props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return { message: ‘hello‘ }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return [‘success‘, ‘warning‘, ‘danger‘].indexOf(value) !== -1
      }
    }
  }
})

在prop验证失败，在控制台中有警告。