组件上的一些属性没有在prop：中定义。
因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。
如果你不希望组件的根元素继承特性，你可以设置在组件的选项中设置 inheritAttrs: false;
有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素。
两者配合使用 要个那个元素加上
v-bind="$attrs"，那么这个属性就会定义到这个元素上，但是class和style属性仍会在子组件的根节点上
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>非prop得特性</title></head><body> ???<div id="app"> ???????<base-input ???????v-model="username" ???????class="username-input" ???????style="height: 25px;font-size: 20px" ???????label="姓名" ???????placeholder="Enter your username" ???????placeholder2="Enter your username" ???????></base-input> ?</div> ???<script src="https://cdn.jsdelivr.net/npm/vue"></script> ?<script> ???????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> ???????????????` ???????}) ???????var vm ?= new Vue({ ???????????el: ‘#app‘, ???????????data:{ ???????????????username:‘‘, ???????????} ???????}) ?</script></body></html>
最终渲染结果
vueJs-非prop的特性
原文地址：https://www.cnblogs.com/pangmin/p/9044937.html