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>

<script>

export default {

    name:'todo',

    props:["todo"],

    methods:{

        markComplete(){

            this.todo.completed = !this.todo.completed

        }

    }

}

</script>

<style scoped>

.todo-item{

    background: #f4f4f4;

    padding: 10px;

    border-bottom: 1px dotted #ccc ;

}

.is-complete{

    text-decoration: line-through

}

.del{

    background: #ff0000;

    color: #fff;

    border: none;

    padding: 5px 9px;

    border-radius: 50%;

    cursor: pointer;

    float: right;

    outline: none

}

</style>

 

2，子组件 Todos.vue

<template>

  <div>

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

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

    </div>

  </div>

</template>

<script>

import TodoItem from './TodoItem'

export default {

    name:'todos',

    props:["todos"],

    components:{

      TodoItem:TodoItem

    },

    methods:{

      deleteItem(id){

        this.$emit('handleDelete',id)

      }

    }

}

</script>

 

3，父组件 app.vue 

<template>

  <div id="app">

     <Todos :todos="todos" @handleDelete="handleDelete"/>

  </div>

</template>

<script>

import Todos from './components/Todos'

export default {

  name:'app',

  data(){

    return{

      todos:[

        {id:1,title:"待办事项1",completed:false},

        {id:2,title:"待办事项2",completed:false},

        {id:3,title:"待办事项3",completed:false},

      ]

    }

  },

  components:{

    Todos:Todos

  },

  methods:{

    handleDelete(id){

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

      this.todos = this.todos.filter(todo => todo.id != id);

    }

  }

}

</script>

<style>

*{margin: 0;padding: 0;box-sizing: border-box}

</style>