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>
posted @ 2019-10-31 14:04  武卡卡  阅读(2216)  评论(0编辑  收藏  举报