学习记录
官方代码为:
<div id="app">
<input type="text" value="hihihi">
<base-input
v-model="username"
required
placeholder='Enter your username'
></base-input>
</div>
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>
`
})
new Vue({
el:'#app',
data:{
value:"",
username:''
}
})
效果图:
理解:
当我们删除关键代码【vue组件中的:inheritAttrs:false, 和 v-bind=$attrs 】时:
效果为: