Vue.component函数的使用及如何创建局部组件

在Vue.js中，组件是一个非常重要的概念。组件可以让我们把复杂的UI拆分成一些小的、独立的、可复用的部件。这个过程类似于函数的抽象，函数把程序抽象成了一些小的可复用的模块，组件也把UI抽象成了一些小的可复用的模块。

Vue.component函数的使用

Vue.component函数是Vue.js用来注册全局组件的方法，它接收两个参数：组件的名称和组件对象。组件对象可以包含组件的模板、数据、方法等。

下面是一个最简单的例子：

Vue.component('my-component', {

  template: '<div>这是一个组件</div>'
});

这个例子定义了一个名为my-component的组件，这个组件的模板是一个包含了一段简单文本的div元素。

注册完组件之后，我们就可以在HTML中使用这个组件：

<my-component></my-component>

当Vue.js解析这个组件代码的时候，它会自动将my-component组件替换成对应的模板：<div>这是一个组件</div>。

组件的数据

组件可以拥有自己的数据，在组件对象中定义一个data函数可以返回这些数据：

Vue.component('my-component', {

  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'hello world'
    }
  }
});

在组件模板中使用了一个message变量，这个变量就是在组件中定义的数据。当组件被渲染时，Vue.js会自动将模板中的message变量替换成对应的数据。

组件的方法

组件也可以拥有自己的方法，在组件对象中定义一个methods对象可以包含这些方法：

Vue.component('my-component', {

  template: '<div><button v-on:click="clickHandler">点我</button></div>',
  methods: {
    clickHandler: function () {
      alert('clicked');
    }
  }
});

这个例子定义了一个clickHandler方法，这个方法会在按钮被点击时被调用。在模板中使用v-on:click绑定了这个方法，当按钮被点击的时候，clickHandler方法就会被调用。

组件的props

有时候我们需要从父组件向子组件传递数据，这时候就需要使用props属性。在组件对象中定义一个props对象可以包含这些属性：

Vue.component('child-component', {

  props: ['message']
});

这个例子定义了一个名为message的属性，它可以从父组件中传递过来。在父组件中使用v-bind绑定这个属性：

<child-component v-bind:message="'hello world'"></child-component>

这个例子将一个名为message的属性绑定到了一个字符串'hello world'上，并将这个属性传递到了子组件中。

如何创建局部组件

在前面的例子中，我们用Vue.component函数创建了全局组件。这种方式创建的组件可以在任何地方使用。但是在实际开发中，我们更多需要的是局部组件。局部组件只能在定义它们的父组件中使用。

下面是一个用Vue.component函数创建全局组件的例子：

Vue.component('my-component', {

  template: '<div>这是一个全局组件</div>'
});

在这个例子中，my-component是一个全局组件，可以在任何地方使用。

如果要定义一个局部组件，我们可以在父组件的对象中定义一个components对象，这个对象包含了局部组件的定义：

var app = new Vue({

  el: '#app',
  components: {
    'my-local-component': {
      template: '<div>这是一个局部组件</div>'
    }
  }
})

在这个例子中，app是一个Vue实例，这个实例定义了一个id为app的根元素，并且在对象中定义了一个components对象，这个对象包含了一个名为my-local-component的局部组件的定义。

在HTML中可以使用这个局部组件：

<div id="app">

  <my-local-component></my-local-component>
</div>

当Vue.js解析这个组件代码的时候，它会自动将my-local-component组件替换成对应的模板：<div>这是一个局部组件</div>。

局部组件的作用域

在Vue.js中，每个组件都拥有自己的作用域。这就意味着，组件内部定义的数据、方法和计算属性都只在组件内部可见，不能被父组件访问到。

下面是一个使用局部组件的例子：

var app = new Vue({

  el: '#app',
  data: {
    message: 'hello world'
  },
  components: {
    'my-local-component': {
      template: '<div>{{ message }}</div>',
      data: function () {
        return {
          localMessage: '局部消息'
        }
      },
      methods: {
        clickHandler: function () {
          alert('clicked');
        }
      },
      computed: {
        reversedLocalMessage: function () {
          return this.localMessage.split('').reverse().join('')
        }
      }
    }
  }
})

在这个例子中，app实例中定义了一个名为message的数据。在局部组件my-local-component中，定义了一个名为localMessage的数据，一个clickHandler方法，和一个计算属性reversedLocalMessage。

在组件模板中，使用了一个message变量和一个reversedLocalMessage变量。注意，在模板中使用的message变量是从父组件中继承而来的，而reversedLocalMessage变量是在当前组件中计算的。

当组件被渲染的时候，data中定义的localMessage变量、methods中定义的clickHandler方法和computed中定义的reversedLocalMessage计算属性都只能在组件内部访问到，不能被父组件访问到。

总结

Vue.js中的组件是一种强大的抽象机制，可以让我们方便地拆分UI并且利用复用的机制来减少重复代码。Vue.component函数是Vue.js用来注册全局组件的方法，可以让我们在应用程序任意地方使用组件。而局部组件则只能在定义它们的父组件中使用，更符合实际的开发需求。

在定义组件时，特别需要注意每个组件的作用域，组件内部定义的数据、方法和计算属性都只在组件内部可见。这种机制可以让我们更好地封装UI组件，提高代码复用性。