如何使用vue定义组件之——全局or局部

        在Vue中定义一个组件，您需要使用Vue.component()方法来全局注册组件，或者在Vue实例的选项中局部注册组件，以下是一个具体的步骤？

1.全局注册组件：

        使用Vue.component()方法来注册一个全局组件，这意味着这个组件可以在任何Vue实例中使用。例如，注册一个名未runoob的全局组件:

<div id="app">
  <runoob></runoob>
</div>

<script>
// 注册全局组件
Vue.component('runoob', {
  template: '<h1>自定义组件！</h1>'
})

// 创建根实例
new Vue({
  el: '#app'
})
</script>

2.局部注册组件：

• 如果您想要组件只在特定的Vue实例中使用，可以在该实例的选项中进行局部注册。例如：

<div id="app">
  <runoob></runoob>
</div>

<script>
new Vue({
  el: '#app',
  // 局部注册组件
  components: {
    'runoob': {
      template: '<h1>自定义组件！</h1>'
    }
  }
})
</script>

3.组件内容：

• 组件的内容通常包括模板(template)、数据(data)和方法(methods)。模板是组件的HTML结构，数据是组件的状态，方法是组件的逻辑。例如，创建一个点击计数器组件：

• <div id="app">
    <button-counter></button-counter>
  </div>
  
  <script>
  // 定义 button-counter 组件
  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button @click="count++">点击了 {{ count }} 次</button>'
  })
  
  // 创建根实例
  new Vue({
    el: '#app'
  })
  </script>
  

  总的来说，在这个例子中，button-counter组件有一个数据属性count，初始值为0。每次点击按钮，count的值会增加1，并且显示在按钮上。

相关文章：

如何使用vue定义组件之——父组件调用子组件

如何使用vue定义组件之——子组件调用父组件数据 

如何使用vue定义组件之——父组件调用子组件数据