Vue组件基础用法详解

下面我将详细讲解“Vue组件基础用法详解”的完整攻略。

一、Vue组件基础

在Vue中，组件是可复用的Vue实例。它们接受相同的选项（例如，data，computed，mounted），并且可以有自己的模板，方法, 以及样式。组件系统提供了一种抽象，让我们可以使用独立可复用的小组件构建大型应用程序。

二、全局注册组件

全局注册一个组件，需要使用Vue.component方法。例如：

Vue.component('component-name', {
  // options
})

其中，component-name 是组件名称，这里我们示例使用my-component。

Vue.component('my-component', {
  template: '<div>这是一个全局组件</div>'
})

然后，在 new Vue中使用它：

new Vue({
  el: '#app'
})

在HTML中，使用组件：

<div id="app">
  <my-component></my-component>
</div>

这个例子中，我们全局注册了一个名为 my-component 的组件，并将其挂载到了 #app 元素。

三、局部注册组件

如果你只在某个组件中想要使用一个组件。这可以通过使用components选项来实现。

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

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

这里我们示例一个带有两个子组件的 Vue 实例：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
</div>

其中组件ComponentA和ComponentB通过components属性在Vue实例的scope中注册。

四、Prop

Props 是传递给组件的数据。一个组件默认可以接受任意props，在组件内，通过props选项将其映射到本地变量。

Vue.component('my-component', {
  props: ['propA'],
  template: '<div>{{ propA }}</div>'
})

然后，在 new Vue 中使用它（注意这里借助父组件传递数据到子组件）：

<div id="app">
  <my-component prop-a="父组件中的数据"></my-component>
</div>

这个例子中，父组件中的数据 prop-a 传递给了子组件 my-component 的 propA。

五、事件

你也可以发送自定义事件。子组件通过$emit方法来触发，父组件通过v-on监听事件。示例：

Vue.component('my-component', {
  template: '<button @click="raiseEvent">发送事件</button>',
  methods: {
    raiseEvent: function () {
      this.$emit('custom-event')
    }
  }
})

然后，在 new Vue 中使用它：

<div id="app">
  <my-component @custom-event="handleEvent"></my-component>
</div>

这里 my-component 代码中 this.$emit('custom-event') 发送一个自定义事件。在父组件中，@custom-event="handleEvent" 监听自定义事件，并在父组件实例的 methods 对象中定义了 handleEvent 方法。

六、总结

本篇攻略介绍了Vue组件基础的使用方法和技巧。其中包括了组件的全局注册和局部注册、props的应用以及如何发送和接受自定义事件。这些知识点是构建Vue组件化应用程序的基础，希望对大家有所帮助。