vue:todolist Demo

TodoList.vue

  <template>
    <div>
      <div>
        <input v-model="inputValue">
        <button @click="handleSubmit">提交</button>
      </div>
      <ul>
        <todo-item
          v-for="(item,index) of list"
          :key="index"
          :content="item"
          :index="index"
  //监听模版删除事件
        @delete="handleDelete"></todo-item>
      </ul>
    </div>
  </template>

    <script>
      import TodoItem from './components/TodoItem'//引入模版
      export default {
    //引入模版
        components: {
          'todo-item': TodoItem
        },
    //数据
        data: function () {
          return {
            inputValue: '',
            list: []
          }
        },
    //方法
        methods: {
          handleSubmit() {
            this.list.push(this.inputValue);
            this.inputValue = ''
          },
          handleDelete(index){
            this.list.splice(index,1)
          }
        }
      }
    </script>

TodoItem.vue

    <template>
        <li  @click="handleDelete">{{content}}</li>
    </template>

    <script>
	    export default {
	    //接收传入的数据
	      props:['content','index'],
	      methods:{
	        handleDelete(){
	    //触发自定义函
	          this.$emit('delete',this.index)
	        }
	      }
    }
    </script>