Vue--理解非prop特性

所谓非 prop 特性，就是指它可以直接传入组件，而不需要定义相应的 prop。

尽管为组件定义明确的 prop 是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。

例如，假设我们使用了第三方组件 bs-date-input，它包含一个 Bootstrap 插件，该插件需要在 input 上添加 data-3d-date-picker 这个特性。这时可以把特性直接添加到组件上 (不需要事先定义 prop)：

<bs-date-input data-3d-date-picker="true"></bs-date-input>

添加属性 data-3d-date-picker="true" 之后，它会被自动添加到 bs-date-input 的根元素上。

举个例子：

 1 <div id="app">
 2     <my-comp data-title="learn vue" class="mycls" style="color:red;"></my-comp>
 3 </div>
 4 <script>
 5     Vue.component('my-comp', {
 6         template: '<div>我是组件</div>'
 7     });
 8     new Vue({
 9         el: '#app'
10     });
11 </script>

说明：data-title，class，style就是非prop属性，无需定义相应的prop，这些属性都会被添加到组件的根元素上。

渲染结果：<div data-title="learn vue" class="mycls" style="color: red;">我是组件</div>