disabling attribute inheritance

欢迎来到我的博客

你好！我叫Joy，很高兴您来到这里，这是我第一个博客的第一篇内容，以后将会更多。我学习js再到vue，都是自学的过程，在这个过程中我经常会遇到各种问题，我猜想你们也在经历这些，希望您能在这里有所收获。如果发现问题或者您有什么建议，都可以给我留言，enjoy yourself！

前序

只所以会写这个博客，是因为在学习这块内容的时候对官方例子很疑惑，经过研究之后，才搞明白$attrs和inheirtAttrs的使用。个人觉得这块内容可以让component使用父级的props更加方便，所以在这里做一个学习笔记。

disabling attribute inheritance的官方例子解析

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

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>
		`
})

以上代码在google chrome里显示如下：

$attrs的作用是从父级那里继承除了class 和 style和props里属性之外的attributes。attributes指的是v-bind:value之类的，但是不涵盖v-bind:class和v-bind:style.也不包含 类似v-on:input，v-on:这一系列，以上例子就是继承了required和placeholder='Enter your username’这两个特性。v-model 等同于 v-bind:value and v-on:input 所以都会继承value属性。

<base-input v-bind:value='username' v-on:input='myInput' required placeholder='Enter your username'></base-input>

Vue.component('base-input',{
	props : ['label'],
	template:`
		<label>
		<input v-bind='$attrs' v-on:input='$emit('input',$event.target.value)'>
		<button v-bind='$attrs'>submit</button>
		<div v-bind='$attrs'></div>
		</label>
		`
})
new Vue({
	el : '.app',
	data : {
		username : ''
		},
	methods : {
		myInput : function (){
			this.username=event.target.value
		}
	}
})

当我在input框里面输入‘nihao’时，value随之变为nihao，这样就把父级的value属性继承了。但是，input与其它元素不同，虽然input并不显示value属性，但是，这个元素里面存在value属性，而作为对比的button和div都直接显示有value属性。
inheritAttrs功能比较简单，就是将其在元素上的属性进行隐藏。

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

原本label上面的一系列属性进行隐藏，目的就是让代码看上去更干净。
再拓展：

 <div class='app'>
      <father-blog :name='myName' :lastName='myLastName' :age='40' :sex='mySex'></father-blog>
 </div>

new Vue({
       el : '.app',
       data : {
           myName : 'xiang',
           myLastName : 'wang',
           mySex : 'man'
      }，
       components : {
           'father-blog' : {
               props : ['age','name','sex'],
               template : `
                   <div>
                       <child-blog v-bind='$attrs' :sex='sex'></child-blog>
                   </div>
               `,
               components : {
                   'child-blog' : {
                       template : `
                           <div class='child'></div>
                       `
                   }
               }
           }
       }
   })

若在father的component里面有props : [‘age’,‘name’,‘sex’],那么template里面的child-blog组件使用v-bind='$attrs'就不会继承全部的属性，之前说过，会剔除props里面的属性，以及class和style属性，所以这里只显示为lastname属性。
例如想在child-blog组件里继承props已有的属性sex，则需要<child-blog v-bind='$attrs' :sex='sex'>进行重新绑定.
另外需要注意的就是，vue里面对字母大小写不敏感，所以在创建组件名字的时候，不建议使用大头峰拼写，而使用-来连接,child-blog来替代 childBlog.且在该例子中，我使用:lastName ，但HTML显示为lastname，而且在vue底层也只有lastname,没有lastName。