Vue.js 组件教程

在这个部分，我们将深入探讨 Vue.js 中组件的创建和使用。组件是 Vue.js 应用程序构建的基石，它们允许我们以可重用的方式组织和封装代码。

什么是组件？

Vue.js 组件是一个可复用的 Vue 实例，它被包裹在一个 vue 标签中。组件可以接受属性、拥有自己的数据、方法、计算属性和生命周期钩子。

组件的使用

以下是一个简单的组件示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js 组件',
      description: '组件是 Vue.js 的核心概念之一。'
    }
  }
}
</script>

组件注册

组件可以通过全局注册或局部注册来使用。

全局注册

Vue.component('my-component', {
  // ...
});

局部注册

export default {
  components: {
    'my-component': MyComponent
  }
}

事件处理

组件可以通过 $emit 方法触发事件。

this.$emit('event-name', payload);

生命周期钩子

组件的生命周期钩子允许我们在组件的不同阶段执行代码。

export default {
  mounted() {
    // ...
  },
  beforeDestroy() {
    // ...
  }
}

了解更多关于 Vue.js 组件的细节，请访问我们的Vue.js 教程页面。

# Vue.js Components Tutorial

In this section, we delve into the creation and usage of components in Vue.js. Components are the building blocks of Vue.js applications and allow us to organize and encapsulate code in a reusable manner.

### What is a Component?

A Vue.js component is a reusable Vue instance wrapped in a `vue` tag. Components can accept props, have their own data, methods, computed properties, and lifecycle hooks.

### Using Components

Here is a simple component example:

```html
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js Components',
      description: 'Components are one of the core concepts of Vue.js.'
    }
  }
}
</script>

Component Registration

Components can be registered globally or locally.

Global Registration

Vue.component('my-component', {
  // ...
});

Local Registration

export default {
  components: {
    'my-component': MyComponent
  }
}

Event Handling

Components can trigger events using the $emit method.

this.$emit('event-name', payload);

Lifecycle Hooks

Component lifecycle hooks allow us to execute code at different stages of a component.

export default {
  mounted() {
    // ...
  },
  beforeDestroy() {
    // ...
  }
}

For more details on Vue.js components, please visit our Vue.js Tutorial page.