1.prop的定义：

在没有状态管理机制的时候，prop属性是组件之间主要的通信方式，prop属性其实是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件。 

2.prop定义的数据类型

props: {

    name: String, //字符串类型
    type: {
      validator: function(value) { //验证函数
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].includes(value);
      }
    },
    list: {
      type: Array,//数组类型，也可以是Object
      default: () => []
    },
    isVisible: { //Boolean类型
      type: Boolean,
      default: false
    },
    onChange: {  //函数类型
      type: Function,
       default: () => {}
    }
  },

prop属性中可以定义属性的类型，也可以定义属性的初始值。如name：String,default:"vm",表示第一次加载name属性时其值为vm。prop属性中定义的属性也可以验证该属性，比如上面的type属性，其值必须是"success", "warning", "danger"中的任意一个，要是不是这是三个中的任意一个也可以显示，但是这时控制台会报错,所以要使用validator验证函数时要谨慎。这里的list定义的是一个数组，默认必须从一个工厂函数获取。isVisble定义的是一个boolean值，默认是default:false。onChange定义的是一个函数，这个函数在这里的意义是建立子组件向父组件传值的途径。

3.非prop特性

有时候父组件会向子组件传任意特性。比如现在有一个父组件Parent,一个子组件Child,这时候你要向子组件添加一个data-date-picker="activated" ，这时候你在Child组件中加inheritAttrs:false  

inheritAttrs: false, //不继承父组件的特性

当你添加完这个属性后子组件将不会继承该属性。
很多时候inheritAttrs:false结合$attrs实例方法可以决定这些特性被赋予哪些元素。

vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

这个例子中如果没有给组件base-input中的input使用v-bind绑定$attrs实例属性，在父组件中的placeholder属性就不会传递给子组件。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/2467