vue 模块化 todolist

//app.vue
<template>
  <div>
      <input v-model="inputValue" type="text">
      <button @click="addList">add</button>
      <ul>
        <todo-list v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="deleteItem"/>
      </ul>
  </div>
</template>

<script>
import todoList from './components/todoList'

export default {
  name: 'app',
  components: {
    todoList
  },
  data () {
    return {
      inputValue: '',
      list: []
    }
  },
  methods: {
    addList () {
      this.list.push(this.inputValue)
      this.inputValue = ''
    },
    deleteItem (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style>

</style>

//components/todoList.vue
<template>
  <div>
    <li @click="deleteItem">{{content}}</li>
  </div>
</template>

<script>
export default {
  name: 'todoList',
  props: [
    'content',
    'index'
  ],
  methods: {
    deleteItem () {
      this.$emit('delete', this.index)
    }
  }
}
</script>

<style scoped>

</style>