vue 组件 props 和event

组件是可扩展的HTML元素，封装可重用的代码。

使用祖册的组件，要确保在初初始化根实例之前注册组件

注册的组件中，data必须是函数

父组件通过props向子组件传递数据，子组件通过事件events给父组件发送消息。

组件实例的作用域是孤立的

props是单向绑定的：当父组件的属性变化时，将传递给子组件，但是不会反过来。这是为了防止子组件无意修改父组件的状态；每次父组件更新时，

子组件的所有props都会更新为最新值，这意味着你不应该在子组件内部改变prop，如果你这么做了，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()
}
}

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

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