组件化，为 Vue 编程打开新世界的大门

前端

2023-10-15 19:24:44

Vue.js 中的组件化思想

组件化编程是一种将应用程序分解成独立、可重用的模块的软件工程技术。在 Vue.js 中，组件可以理解为一个封装了特定功能的独立单元，它具有自己的模板、样式和逻辑。组件可以被多次使用，从而减少代码重复并提高开发效率。

组件化思想在 Vue.js 中有很多优势，包括：

代码可重用性： 组件可以被多次使用，从而减少代码重复并提高开发效率。
可维护性： 组件可以独立开发和维护，从而提高代码的可维护性。
可测试性： 组件可以独立测试，从而提高代码的可测试性。
可扩展性： 组件可以很容易地组合成更复杂的应用程序，从而提高代码的可扩展性。

使用组件构建简单应用程序

为了演示如何使用组件构建简单应用程序，我们将创建一个简单的待办事项应用程序。该应用程序将允许用户添加、编辑和删除待办事项。

首先，我们需要创建一个 Vue 实例。Vue 实例是应用程序的根组件，它负责管理应用程序的状态和渲染应用程序的 UI。

const app = new Vue({
  el: '#app',
  data: {
    todos: []
  }
})

接下来，我们需要创建一个组件来表示单个待办事项。

const TodoItem = {
  template: `<li>{{ todo.text }} <button @click="deleteTodo">删除</button></li>`,
  props: ['todo'],
  methods: {
    deleteTodo() {
      this.$emit('delete-todo', this.todo)
    }
  }
}

TodoItem 组件接受一个 todo 属性，该属性是一个包含待办事项文本的对象。组件还包含一个 deleteTodo 方法，该方法负责删除待办事项。

最后，我们需要创建一个组件来表示整个待办事项应用程序。

const App = {
  template: `
    <div>
      <input type="text" v-model="newTodoText">
      <button @click="addTodo">添加</button>
      <ul>
        <todo-item v-for="todo in todos" :todo="todo" @delete-todo="deleteTodo"></todo-item>
      </ul>
    </div>
  `,
  data() {
    return {
      todos: [],
      newTodoText: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodoText })
      this.newTodoText = ''
    },
    deleteTodo(todo) {
      this.todos = this.todos.filter(t => t !== todo)
    }
  },
  components: {
    TodoItem
  }
}