分分钟玩转Vue.js组件（二）

让我来详细讲解一下“分分钟玩转Vue.js组件（二）”的完整攻略。

简介

Vue.js 是一款非常流行的 JavaScript 库，用于构建用户界面。Vue.js 具有简单易学、轻量灵活、响应式渲染及组件化等特点， 非常适合构建现代化的 Web 应用程序。

本篇文章将带大家深入了解 Vue.js 中的组件化，在掌握基本概念后，教你如何使用 Vue.js 构建高效、灵活、可重用的组件。

Vue.js 组件

Vue.js 的组件是具有复用性、可组合性和高扩展的利器，使用组件可以将代码划分为小的、独立的组件，提高代码复用和可维护性。

Vue.js 中的组件是通过 Vue.extend() 方法来创建的，每个组件包括一个模板(template)、一个组件类型(type)和一个数据(data)，可以拥有自己的生命周期钩子函数(lifecycle hooks)、数据属性(data properties)和计算属性(computed properties)。

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

Vue.component('my-component', {
    template: '<div>{{ message }}</div>',
    data: function(){
        return {
            message: 'Hello, Vue!'
        }
    }
})

我们使用 Vue.component() 方法来创建一个名为 my-component 的组件，组件的模板使用了 Vue.js 的文本插值功能，并使用了一个名为 message 的数据属性，通过 data 函数来返回数据对象，以实现数据驱动的渲染。

接下来，将通过两个实际例子来说明如何使用 Vue.js 搭建组件并进行拆分。

示例1 - TodoList

本示例实现的是一个 TodoList 组件，包含添加、删除、修改和列表展示等功能。

在这个示例中，我们将创建一个名为 'todo-list' 的组件，组件的模板包含一个输入框和一个按钮，用于添加新任务，以及一个任务列表。同时，我们将为组件添加一个 prop 属性，用来控制是否展示已完成的任务列表。

<template>
  <div>
    <h2>Todo List</h2>
    <div>
      <input type="text" v-model="newTodo">
      <button @click="addTodo">Add Todo</button>
    </div>
    <div>
      <ul>
        <li v-for="(todo, index) in todos" :key="todo.id">
          <input type="checkbox" v-model="todo.completed">
          <span :class="{completed: todo.completed}">{{ todo.title }}</span>
          <button @click="deleteTodo(index)">Delete</button>
        </li>
      </ul>
    </div>
    <div v-if="showCompleted">
      <h3>Completed Todos</h3>
      <ul>
        <li v-for="(todo, index) in completedTodos" :key="todo.id">
          <input type="checkbox" v-model="todo.completed">
          <span :class="{completed: todo.completed}">{{ todo.title }}</span>
          <button @click="deleteCompleted(index)">Delete</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TodoList',
    props: {
      showCompleted: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        newTodo: '',
        todos: [
          { id: 1, title: 'Learn Vue.js', completed: false },
          { id: 2, title: 'Build an app', completed: true }
        ]
      }
    },
    computed: {
      completedTodos () {
        return this.todos.filter(todo => todo.completed)
      }
    },
    methods: {
      addTodo () {
        if (!this.newTodo) return
        this.todos.push({
          id: this.todos.length + 1,
          title: this.newTodo,
          completed: false
        })
        this.newTodo = ''
      },
      deleteTodo (index) {
        this.todos.splice(index, 1)
      },
      deleteCompleted (index) {
        this.completedTodos.splice(index, 1)
      }
    }
  }
</script>

<style>
  .completed {
    text-decoration: line-through;
  }
</style>

在上述代码中，我们定义了一个名为 TodoList 的组件，该组件中包含了添加、删除、修改和列表展示等功能。

其中，模板部分包括了添加任务的输入框和按钮，以及任务列表、已完成任务列表。还定义了一个 showCompleted 的 prop 属性，用来控制已完成任务列表的显示与隐藏。

在组件的 data 中我们定义了 todos 数组，包含了已经添加的任务项。

通过 computed 属性，我们定义了 completedTodos 计算属性，用来计算已完成的任务列表，以及一个初始化的 newTodo 变量，用于添加新任务。

在 addTodo 和 deleteTodo 方法中，我们使用了 todos 数组来添加和删除任务项，其中 deleteTodo 方法将删除选择的任务项。

最后，我们使用了带参数的 deleteCompleted 方法，在 completedTodos 中删除已选择的已完成任务项。

示例2 - Modal

Modal 是一种常见的 UI 组件，在 Vue.js 中同样可以使用组件实现。

在这个示例中，我们将创建一个名为 Modal 的组件，包含了打开、关闭、以及向组件传递数据的功能。

<template>
  <transition name="modal">
    <div v-if="isShow">
      <div class="modal-mask" @click="close"></div>
      <div class="modal-wrapper">
        <div class="modal-container">
          <h3>{{ title }}</h3>
          <div>{{ content }}</div>
          <div class="modal-footer">
            <button @click="close">Cancel</button>
            <button @click="submit">Confirm</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'Modal',
    props: {
      isShow: Boolean,
      title: {
        type: String,
        default: 'Title'
      },
      content: String
    },
    methods: {
      close () {
        this.$emit('close')
      },
      submit () {
        this.$emit('submit')
      }
    }
  }
</script>

<style>
  .modal-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }
  .modal-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }
  .modal-container {
    background-color: #fff;
    padding: 20px;
  }
</style>

在上述代码中，我们定义了一个名为 Modal 的组件，该组件模板包括了一个具有渐变效果的面板，以及标题、内容、取消和确认按钮。

在 props 中我们定义了 isShow、title 和 content 等属性，用于控制 Modal 组件的打开状态、标题和内容。通过 $emit() 函数，我们在关闭和确认Modal时触发相应的自定义事件。

最后，我们定义了一些基本的样式属性，以实现 Modal 的弹出、居中和渐变效果。

总结

本文对 Vue.js 组件化进行了深入的介绍，并结合两个实际例子对 Vue.js 组件的开发和使用进行了详细的讲解。

组件化是现代化 Web 开发的重要组成部分，它可以提高代码复用和可维护性，为开发者提供更加高效、灵活、可重用的代码书写方式。

希望今天的分享能够帮助到你，让你更好的掌握 Vue.js 组件化的核心概念和开发技巧。