首页 > 其他 > 详细

vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递

时间:2019-11-01 14:06:09      阅读:88      评论:0      收藏:0      [点我收藏+]

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>

vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递

原文:https://www.cnblogs.com/500m/p/11776551.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!