编辑“︁Vue.js组件概述”︁

= Vue.js组件概述 =

== 引言 ==
'''Vue.js组件'''是Vue.js框架的核心概念之一，用于构建可复用的UI模块。组件允许开发者将应用程序拆分为独立、可维护的单元，每个单元封装自己的结构（HTML）、样式（CSS）和行为（JavaScript）。这种模块化设计模式提高了代码的可读性、可维护性和复用性。

== 组件的基本概念 ==
在Vue中，组件是一个预定义选项的Vue实例。它可以接收输入（通过'''props'''），管理自身状态（通过'''data'''），并触发输出（通过'''events'''）。组件通过树状结构组织，形成完整的应用程序。

=== 组件的主要特性 ===
* '''封装性'''：组件将模板、逻辑和样式组合在一个单元中。
* '''复用性'''：同一组件可在多个地方重复使用。
* '''组合性'''：组件可以嵌套其他组件形成复杂UI。
* '''隔离性'''：组件拥有独立的作用域（通过<code>scoped</code>样式实现CSS隔离）。

== 组件定义与注册 ==
Vue组件需要先定义后使用。以下是两种常见的定义方式：

=== 全局注册 ===
通过<code>Vue.component()</code>方法注册全局可用组件：
<syntaxhighlight lang="javascript">
// 定义名为'button-counter'的组件
Vue.component('button-counter', {
  data: function() {
    return { count: 0 }
  },
  template: '<button @click="count++">Clicked {{ count }} times</button>'
})

// 使用组件
new Vue({ el: '#app' })
</syntaxhighlight>
HTML中使用：
<syntaxhighlight lang="html">
<div id="app">
  <button-counter></button-counter>
</div>
</syntaxhighlight>

=== 局部注册 ===
通过选项对象在父组件中注册：
<syntaxhighlight lang="javascript">
const ChildComponent = {
  template: '<div>A child component!</div>'
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  }
})
</syntaxhighlight>

== 组件通信机制 ==
Vue组件通过明确的接口进行通信：

<mermaid>
graph LR
    Parent[父组件] -- props --> Child[子组件]
    Child -- $emit --> Parent
</mermaid>

=== Props（父→子） ===
父组件通过属性向子组件传递数据：
<syntaxhighlight lang="javascript">
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})
</syntaxhighlight>
使用：
<syntaxhighlight lang="html">
<blog-post title="My Journey with Vue"></blog-post>
</syntaxhighlight>

=== 自定义事件（子→父） ===
子组件通过<code>$emit</code>触发事件：
<syntaxhighlight lang="javascript">
Vue.component('button-counter', {
  template: `
    <button @click="$emit('increment')">
      Increment
    </button>
  `
})
</syntaxhighlight>
父组件监听：
<syntaxhighlight lang="html">
<button-counter @increment="total++"></button-counter>
</syntaxhighlight>

== 组件生命周期 ==
Vue组件实例有明确的生命周期阶段：

<mermaid>
graph TD
    A[创建] --> B[挂载]
    B --> C[更新]
    C --> D[销毁]
</mermaid>

关键生命周期钩子：
* <code>created</code>：实例创建后
* <code>mounted</code>：DOM挂载后
* <code>updated</code>：数据变更导致DOM更新后
* <code>destroyed</code>：实例销毁后

示例：
<syntaxhighlight lang="javascript">
Vue.component('lifecycle-demo', {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('DOM mounted')
  }
})
</syntaxhighlight>

== 实际应用案例 ==
=== 用户评论组件 ===
<syntaxhighlight lang="javascript">
Vue.component('user-comment', {
  props: ['author', 'text'],
  template: `
    <div class="comment">
      <h4>{{ author }}</h4>
      <p>{{ text }}</p>
      <button @click="$emit('reply')">Reply</button>
    </div>
  `
})
</syntaxhighlight>
使用：
<syntaxhighlight lang="html">
<user-comment 
  author="Alice" 
  text="Great article!" 
  @reply="handleReply">
</user-comment>
</syntaxhighlight>

== 高级概念 ==
对于进阶开发者，还需了解：
* '''动态组件'''：通过<code><component :is="currentComponent"></code>实现
* '''异步组件'''：按需加载组件
* '''渲染函数'''：JSX替代模板
* '''作用域插槽'''：子组件向父组件传递模板内容

== 数学表达 ==
组件复用效率可通过以下公式量化：
<math>
E = \frac{n \times c}{t}
</math>
其中：
* <math>E</math>：复用效率
* <math>n</math>：使用次数
* <math>c</math>：组件复杂度
* <math>t</math>：开发总时间

== 总结 ==
Vue.js组件是构建现代Web应用的基石，通过合理的组件化设计可以显著提升开发效率和代码质量。初学者应从基础组件通信开始，逐步掌握更高级的组件模式。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js组件基础]]