vue 组件 - prop

prop 是什么

prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

如何使用 prop

1. 在组件内部，使用 props 选项来定义好，当前组件需要用到的参数
2. 调用组件的时候，在组件的标签上面，通过自定义属性来传递 prop

    new Vue({
      el: '#app',
      components: {
        helloWorld: {
          props: ['title'],
          data: function() {
            return {
              msg: '张三'
            }
          },
          template: `
            <div>{{ msg }}</div>
          `
        }
      }
    })

<div id="app">
  <hello-world title="我的天呀"></hello-world>
</div>

props 的定义有几种

两种

1. 数组的方式

props: ['title', 'xxx']

2. 对象的方式 （这种方式能够实现 prop 的验证）

props: {
  title: String,
  // 对象或数组默认值必须必须传递一个函数，然后返回默认值
  xxx: {
    type: Object,
    default: function() {
      return { message: 'hello' }
    }
  },
  // 自定义验证函数
  yyy: {
    validator: function(value) {
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

非 Prop 的特性

如果使用组件时，传递的某个属性，在组件中没有定义这个属性的prop的话，那么这个属性就是一个 非 prop 的特性。非 prop 的特性 会自定添加到组件的 根元素 上面。

替换/合并已有的特性

默认情况下，非 prop 的特性 会直接替换 组件的 根元素 上面的相同名字的属性。（如下代码，最终渲染在浏览器中的 hello 组件的根元素的id值将会是 hhh）。但如果是 class 或者style 的话将会对两边的值做一个合并。

Vue.component('hello', {
  template: `
    <div id="box">我的天呀</div>
  `
})

<div id="app">
  <hello id="hhh"></hello>
</div>

禁用特性继承

如果不希望组件的根元素继承特性，你可以设置组件的 inheritAttrs 选项为 false

Vue.component('hello', {
  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"
  class="username-input"
  placeholder="Enter your username"
></base-input>

PS:

1. prop 是不能主动修改的
2. prop 定义时如果是 驼峰 命令方式，那么使用的时候需要为 短横线 方式，与组件一样在3种特殊情况下，不需要。