Vue——prop注意事项

1. Prop 作为初始值传入后，子组件想把它当作局部数据来用；

2. Prop 作为原始数据传入，由子组件处理成其它数据输出。

对这两种情况，正确的应对方式是：

1. 定义一个局部变量，并用 prop 的值初始化它：

   props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }

2. 定义一个计算属性，处理 prop 的值并返回：

   props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }

   
   
   

3. 所谓非 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 的根元素上。