父组件和子组件的交互以及实现todolist的删除功能

最新推荐文章于 2024-06-22 16:16:09 发布

xuxinwen32

最新推荐文章于 2024-06-22 16:16:09 发布

阅读量243

点赞数

分类专栏：前端文章标签：父组件和子组件的交互以及实现todolist的删除功能

本文链接：https://blog.youkuaiyun.com/xuxinwen32/article/details/86673978

版权

本文示例展示了如何在Vue中实现父组件与子组件的交互，通过props从父组件向子组件传递数据，以及子组件通过$emit向父组件发送事件。具体例子是一个TodoList应用，当点击子组件TodoItem时，触发删除事件，父组件接收到事件后删除对应的待办事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist组件拆分2</title>
    <script src="../2.5.20-vue.js"></script>   <!--//提前加载，避免出现抖屏-->
</head>
<body>
<!--两大核心
父组件和子组件的交互
父组件通过props的方式向子组件传递参数    props: ['content', "index"],      //接收两个属性值
子组件通过发布订阅模式来向父组件传递参数   this.$emit('delete', this.index)
-->
<div id="root">
    <div>
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
       <todo-item
       v-for = "(item, index) of list" :key="index"
       :content = "item"
       :index = "index"
       @delete = "handleDelete"
       ></todo-item>                  <!-- @delete = "handleDelet