vue写组件应该注意的问题

高度抽离组件功能

我们知道，vue中的数据流是单项的，所以提升组件复用性最好的办法就是使子组件只展示数据，将功能函数写在最大的父组件中，使用props将函数或者数据进行向下传递，一层一层，当需要维护时，只需要在最大的组件中进行修改即可。
下面我们将一个vue的todolist使用组件进行写
下面上代码

<template>
  <div>
    <my-input :addNew="addNew"></my-input>
    <h2>已完成{
   {
    list.filter((item) => item.done).length }}</h2>
    <my-list
      :listData="list.filter((item) => item.done)"
      :delItem="delItem"
      :edit="edit"
      :changeStatus="changeStatus"
    ></my-list>
    <h2>未完成{
   {
    list.filter((item) => !item.done).length }}</h2>
    <my-list
      :listData="list.filter((item) => !item.done)"
      :delItem="delItem"
      :edit="edit"
      :changeStatus="changeStatus"
    ></my-list>
  </div>
</template>

<script>
import myInput from "./components/Input";
import myList from "./components/List";
export default {
   
  components: {
   
    myInput,
    myList,
  },
  data() {
   
    return {
   
      list: [
        {
    title: "学习vue", done: false, status: 1 },