Vue 组件入门知识全梳理

什么是 Vue 组件？

在 Vue 中，组件可以理解为独立的可复用的代码块，它可以将一些具有相同或类似功能的代码组织在一起，使其可以被反复使用。

组件具有自己的属性和行为，可以像 HTML 标签一样在模板中使用。每个组件都是一个独立的实例，因此可以用不同的参数和数据来渲染同一个组件。

创建组件

在 Vue 中，可以通过 Vue.component() 方法来创建组件。

全局组件

如果你的组件需要在多个 Vue 实例中都可以使用，那么你需要使用全局组件。创建全局组件的方法如下：

// 创建全局组件
Vue.component('component-name', {
  // 组件配置
})

在组件的配置对象中，可以包含以下选项：

data：组件的数据对象。可以在模板中使用。
template：用于渲染组件的 HTML 模板。
props：组件可以接收的属性列表。每个属性都有自己的数据类型和验证方法。
methods：组件的方法。
mounted：组件挂载之后执行的函数。

局部组件

局部组件只能在 Vue 实例中使用。可以在 Vue 实例的 components 选项中注册局部组件，如下所示：

new Vue({
  el: '#app',
  components: {
    'component-name': {
      // 组件配置
    }
  }
})

使用组件

在 Vue 模板中使用组件的方式和使用 HTML 标签一样：

<component-name></component-name>

如果组件有属性，那么可以使用 v-bind 指令将属性值绑定到组件上：

<component-name :prop-name="prop-value"></component-name>

示例介绍

示例 1：计数器

在这个示例中，我们将创建一个简单的计数器组件，它具有增加数值和减少数值的功能。

首先，我们需要创建组件：

Vue.component('counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>\
               <button @click="increaseCount">+</button>\
               {{ count }}\
               <button @click="decreaseCount">-</button>\
             </div>',
  methods: {
    increaseCount: function () {
      this.count++;
    },
    decreaseCount: function () {
      this.count--;
    }
  }
})

在组件的模板中，包含了两个按钮和一个用于显示当前数值的文本。按钮的 @click 事件绑定了组件的两个方法 increaseCount 和 decreaseCount。

接下来，我们可以在 Vue 实例中使用这个组件：

<div id="app">
  <counter></counter>
</div>

在这个示例中，我们只创建了一个计数器组件。如果需要在同一个页面中使用多个计数器组件，可以重复使用。

示例 2：用户列表

在这个示例中，我们将创建一个用户列表组件，它可以显示用户列表，并在单击某个用户时显示详细信息。

首先，我们需要创建一个包含用户信息的数组：

var users = [
  { id: 1, name: '张三', age: 18, gender: '男' },
  { id: 2, name: '李四', age: 22, gender: '女' },
  { id: 3, name: '王五', age: 31, gender: '男' }
];

接下来，我们需要创建两个子组件：

// 用户列表组件
Vue.component('user-list', {
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  template: '<ul>\
               <li v-for="(user, index) in users" :key="user.id" @click="showUserDetails(user.id)">\
                 {{ user.name }} ({{ user.age }}/{{ user.gender }})\
               </li>\
             </ul>',
  methods: {
    showUserDetails: function (id) {
      // 发送事件，通知父组件显示详细信息
      this.$emit('show-user-details', id);
    }
  }
});

// 用户详细信息组件
Vue.component('user-details', {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  template: '<div>\
               <h2>{{ user.name }}</h2>\
               <p>年龄：{{ user.age }}</p>\
               <p>性别：{{ user.gender }}</p>\
             </div>'
});

在用户列表组件中，我们使用了 v-for 指令来循环遍历 users 数组，并在每个 li 元素上绑定了 showUserDetails 方法。

在用户详细信息组件中，我们使用了 props 属性来接收 user 对象，并在模板中使用了它的属性值。

最后，我们需要在 Vue 实例中使用这两个子组件：

new Vue({
  el: '#app',
  data: {
    users: users,
    selectedUserId: null
  },
  methods: {
    showUserDetails: function (id) {
      this.selectedUserId = id;
    }
  }
});

我们在 Vue 实例中定义了 users 数组和一个变量 selectedUserId，用于追踪选中的用户。

在 showUserDetails 方法中，我们将选中的用户的 id 保存到 selectedUserId 变量中。

接下来，我们可以在模板中使用用户列表组件和用户详细信息组件：

<div id="app">
  <user-list :users="users" @show-user-details="showUserDetails"></user-list>
  <user-details v-if="selectedUserId" :user="users.find(user => user.id === selectedUserId)"></user-details>
</div>

在 user-list 组件中，在用户的 li 元素上绑定了 showUserDetails 事件。在 user-details 组件中，我们使用 v-if 指令来检查是否有选中的用户，并将选中的用户对象传递给组件。