面试题：Vue组件化思想在重构单页面应用中的基础实现

假设你要使用Vue组件化思想重构一个简单的传统单页面应用，该应用包含一个列表展示和一个按钮，点击按钮可以添加新的列表项。请描述大致的重构步骤，包括如何创建Vue组件、组件间如何通信，并用代码示例展示关键部分。

40.7万热度

难度

前端开发Vue

创建Vue项目：
- 使用Vue CLI创建一个新的Vue项目，命令如下：
```
vue create my - app
```

创建Vue组件：

列表组件（List.vue）：负责展示列表项。

<template>
  <ul>
    <li v - for="(item, index) in items" :key="index">{{item}}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  }
};
</script>

按钮组件（Button.vue）：负责触发添加列表项的操作。

<template>
  <button @click="addItem">添加列表项</button>
</template>

<script>
export default {
  methods: {
    addItem() {
      this.$emit('add - new - item');
    }
  }
};
</script>

组件间通信：

在父组件中使用这两个组件，并处理通信。

<template>
  <div>
    <Button @add - new - item="addNewItem"/>
    <List :items="listItems"/>
  </div>
</template>

<script>
import Button from './Button.vue';
import List from './List.vue';

export default {
  components: {
    Button,
    List
  },
  data() {
    return {
      listItems: []
    };
  },
  methods: {
    addNewItem() {
      this.listItems.push('新的列表项');
    }
  }
};
</script>

大致重构步骤总结：
- 组件划分：将应用功能拆分为可复用的组件，如列表展示和按钮点击功能分别封装成List和Button组件。
- 数据管理：确定每个组件的数据职责，如List组件负责展示数据，Button组件负责触发数据变更操作，而父组件管理共享数据listItems。
- 通信建立：通过事件绑定实现Button组件向父组件传递事件，父组件根据事件更新数据，进而通过属性传递将更新后的数据传递给List组件展示。

星途面试题库

面试题：Vue组件化思想在重构单页面应用中的基础实现

知识考点

面试题答案