Vue 2.4.0 inheritAttrs和$attrs的用法

[super-fool]

// html
<div id="app">
   <base-input label-text="请输入你的名字" placeholder="Enter your username"/>
</div>
// js 
{
        let BaseComponent = {
          template: `
            <div>
              <label for="name-input">{{labelText}}</label>
              <input id="name-input" type="text" :placeholder="$attrs.placeholder"/>
            </div>
          `,
          inheritAttrs:true, //默认
          props: {
            labelText: {
              type: String,
              default: ""
            }
          }
        };

        new Vue({
          el:'#app',
          components: {
            'base-input': BaseComponent
          }
        })
 }

---

inheritAttrs的意思是：组件的根元素是否继承特性。 用上面的例子来解释下，inheritAttrs的用处：

1. true:

   <div placeholder="Enter your username">
   <label for="name-input">请输入你的名字</label> 
   <input id="name-input" type="text" placeholder="Enter your username">
   </div>

   我们发现根元素也包含了placeholder这个特性。

2. false:

   <div>
   <label for="name-input">请输入你的名字</label> 
   <input id="name-input" type="text" placeholder="Enter your username">
   </div>

   根元素没有继承外部传来placeholder的特性啦！

---

$attrs就是用来获取props未注册的属性，就如上面的例子中，labelText注册在了prop中，但是，placeholder并未注册prop, 这时候我们就可以用到$attrs了，该属性是一个对象。