vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递
2023-09-14 08:57:23 时间
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课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- Vue中嵌入LayUI框架
- vue-router详解[通俗易懂]
- vue的mixins的使用[通俗易懂]
- Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件
- vue源码分析-从new Vue开始
- 当面试官问我vue的 diff算法时,我会理直气壮地这么说
- 「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
- windows10系统下vue开发环境搭建
- 4.vue 的双向绑定的原理是什么?_监听门事件
- Vue全家桶介绍_vue全家桶有什么好处
- Vue调试工具安装(vue devtools)
- 能不能手写Vue响应式?前端面试进阶_2023-02-27
- 校招前端二面高频vue面试题
- linux下快速部署Vue项目(linux部署vue)
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue框架下的Redis调用实战(vue调用redis)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue应用中部署Redis(vue中使用redis)