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 的根元素上。

举个例子：

<div id="app">
    <my-comp data-title="learn vue" class="mycls" style="color:red;"></my-comp>
</div>
<script>
    Vue.component('my-comp', {
        template: '<div>我是组件</div>'
    });
    new Vue({
        el: '#app'
    });
</script>

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