vue - 子组件向父组件 传递方法和参数

1，子组件 TodoItem.vue  :

<template>

  <div class="todo-item" :class="{'is-complete':todo.completed}">

      <p>

          <input type="checkbox" @change="markComplete">

          {{todo.title}}

          <button class="del" @click="$emit('deleteItem',todo.id)">x</button>

      </p>

  </div>

</template>

 

2，父组件 Todos.vue :

<template>

  <div>

    <div v-for="todo in a" :key="todo.id">

      <TodoItem :todo="todo" @deleteItem="deleteItem"/>

    </div>

  </div>

</template>

<script>

import TodoItem from './TodoItem'

export default {

    name:'todos',

    data(){

      return{

        a:this.todos

      }

    },

    props:{

      todos:{

        type:Array

      }

    },    

    components:{

      TodoItem:TodoItem

    },

    methods:{

      deleteItem(id){

        console.log('id : '+id);

      }

    }

}

</script>