使用Vue父子组件通信实现todolist的功能示例代码
更新时间：2019年04月11日 10:35:42 作者：Filishope
这篇文章主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
先上代码
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">submit</button>
</div>
<ul>
<todolist v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handle"
></todolist>
</ul>
</div>
<script>
Vue.component("todolist",{
props: ['content','index'],
template: '<li @click="handleDelete">{{content}}</li>',
methods: {
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data: {
inputValue:'',
list:[]
},
methods: {
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
创建todolist的基本结构
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">submit</button>
</div>
<ul>
<todolist v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handle"
></todolist>
</ul>
</div>
在这里我们创建了一个todolist标签作为父组件，让它在里面循环遍历list作为我们的输出，同时定义了一个delete的监听事件。
接下来在script标签里定义子组件
Vue.component("todolist",{
props: ['content','index'],
template: '<li @click="handleDelete">{{content}}</li>',
methods: {
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
定义了一个全局类型的子组件，子组件的props选项能够接收来自父组件数据，props只能单向传递，即只能通过父组件向子组件传递，这里将上面父组件的content和index传递下来。
将li标签作为子组件的模板，添加监听事件handleDelete用与点击li标签进行删除。
在下面定义子组件的handleDelete方法，用this.$emit向父组件实现通信，这里传入了一个delete的event，参数是index，父组件通过@delete监听并接收参数
接下来是Vue实例
new Vue({
el:"#root",
data: {
inputValue:'',
list:[]
},
methods: {
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
handleClick方法实现每次点击submit按钮时向list里添加值，在每次添加之后将输入框清空。
而handle方法则是点击删除li标签，这里通过接受传入的index参数来判断点击的是哪一个li
这是删除前：
这是删除后：
总结：
通过点击子组件的li实现向外触发一个delete事件，而父组件监听了子组件的delete事件，执行父组件的handle方法，从而删除掉对应index的列表项，todolist中的list对应项也会被删除掉。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了vue 弹框产生的滚动穿透问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue.js中for循环如何实现异步方法同步执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本文主要记录两个菜单的生成方式,通过在前端router/index.js中直接进行配置,后端返回菜单数据进行对应,可以通过后端返回的菜单数据控制权限,另一种是部门静态导航,然后再拼接动态导航,生成完成页面导航,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了vue使用Print.js打印页面样式不出现的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了深入解读VUE中的异步渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
vue-admin-template模板添加tagsview的实现
本文主要介绍了vue-admin-template模板添加tagsview的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家介绍了Vue高性能列表GridList组件及实现思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
下面小编就为大家分享一篇vue与vue-i18n结合实现后台数据的多语言切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
详解Vue的watch中的immediate与watch是什么意思
这篇文章主要介绍了详解Vue的watch中的immediate与watch是什么意思，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
在vue中使用el-tab-pane v-show/v-if无效的解决
这篇文章主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论