深入了解组件

组件注册

  组件注册分为全局注册和局部注册
  全局注册

Vue.component(tagName, options)
// tagName为组件名，options为配置选项
// 例子：
<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

  局部注册

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

  基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。

prop

  注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
  注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

非prop特性

  一个非prop特性是指传向一个组件，但是该组件并没有相应prop定义的特性。

<bootstrap-date-input :data-date-picker="activated"></bootstrap-date-input>

上面的activated数据是在父组件中决定的，这时候子组件需要data-date-picker这个属性来显示不同的样式，这时候子组件可以用props接受这个数据，然后在根元素上去显示，也可以不写props，data-date-picker这个属性也会自动添加到子组件的根元素上。