本文共 2081 字，大约阅读时间需要 6 分钟。

Vue 组件基础

组件是 Vue 开发中的核心概念，它允许我们将复杂的 UI 结构拆分为多个可复用的部分，从而提高代码的可维护性和复用性。一个组件可以看作是一个自定义的 Vue 实例，带有独特的名称和功能。

组件名命名

组件名的命名方式有两种：

组件注册

组件可以通过全局注册或局部注册的方式加入 Vue 应用中。

全局注册（常用）

全局注册的组件可以在任何新创建的 Vue 实例中使用。注册方式如下：

Vue.component('my-component-name', {  // 组件选项});

局部注册（不常用）

局部注册适用于只在特定 Vue 实例中使用的组件，可以减少不必要的 JavaScript 加载。注册方式如下：

var ComponentA = {  data: function() {    return { count: 0 };  }};var ComponentB = {  data: function() {    return { count: 0 };  }};new Vue({  el: '#app',  components: {    'component-a': ComponentA,    'component-b': ComponentB  }});

组件组织

在 Vue 应用中，组件通常以嵌套的树状结构组织，每个组件可以包含多个子组件。组件需要通过注册（全局或局部）后才能在模板中使用。

组件切换

使用 <component> 标签可以在模板中切换不同的组件。组件名需要用 :is 属性指定，例如：

组件传递数据

组件之间可以通过 props 属性来传递数据。父组件的 props 属性定义了可以传递给子组件的属性名和类型，子组件可以通过 v-bind 绑定这些属性。

示例一：传递单个参数

Vue.component('blog-post', {  props: ['title'],  template: '
{{ title }}
'});

示例二：传递多个参数

var vm = new Vue({  data: {    message: [      { id: 1, title: "JavaScript" },      { id: 2, title: "JQuery" },      { id: 3, title: "Vue" }    ]  }});

子组件向父组件传递数据

如果子组件需要向父组件传递数据，可以使用 v-on 绑定自定义事件，并在子组件中使用 $emit 触发事件。例如：

Vue.component('aaa', {  methods: {    aa() {      this.$emit("add");    }  }});

示例：传递多个参数

Vue.component('aaa', {  methods: {    change(astyle) {      this.size = astyle[0];      this.color = astyle[1];    }  }});

组件间通信（推荐）

为了实现兄弟组件间的通信，推荐使用事件中心模式。步骤如下：

示例

var eventHub = new Vue();

Vue.component('tom-event', {  data: function() {    return { msg: 0 };  },  methods: {    add() {      eventHub.$emit('Jon-event', 1);    }  },  mounted: function() {    eventHub.$on('Tom-event', function(val) {      this.msg += val;    });  }});

示例

Vue.component('jon-event', {  data: function() {    return { msg: 0 };  },  methods: {    add() {      eventHub.$emit('Tom-event', 2);    }  },  mounted: function() {    eventHub.$on('Jon-event', function(val) {      this.msg += val;    });  }});

通过上述方法，点击 tom-event 组件的按钮会触发 Jon-event 事件，向 jon-event 组件传递数据，反之亦然。