27.组件注册

• 27.组件注册
  • 1.全局注册语法
  • 2.组件用法

1.全局注册语法

• 全局组件注册后，任何vue实例都可以用

Vue.component(组件名称, {
  data: 组件数据,         // 函数形式
  template: 组件模板内容
})

// 定义一个名为 button-counter的新组件
Vue.component('button-counter', {
  data: function() {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">点击了{{ count }}次.</button>'
})

2.组件用法

• 组件的使用就是把组件名变标签的写法
• 组件是可以复用的, 数据相互独立, 不影响

<div id="app">
    <button-counter></button-counter>
  	<button-counter></button-counter>
</div>