本文最后更新于2019年1月13日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
上一篇文章中的实例用到了子组件向父组件传值的方法，这篇文章通过todolist的实例来说一下子组件向父组件传值和父组件向子组件传值的方法，以及最终实现点击todolist添加的内容实现删除的效果。
既然实现点击删除的效果，那么我们可以先在生成的li标签里面绑定一个click事件，方法写在子组件的methods中：
- var TodoItem = {
- props:['content','index'], //接收
- template:"<li @click='handleItemClick'>{{content}}</li>",//v-on:click简写@click
- methods: {
- handleItemClick: function () {
- this.$emit("delete",this.index); //通过$emit向上一层触发事件
- }
- }
- }
那么我们的目标是删除掉选中的数据，我们可以这样做，数据是放在父组件中，父组件决定子组件该怎么显示，当我们点击子组件的时候，子组件把对应的内容传给父组件，父组件来改变数据，实现的代码如下：
- methods: {
- handleItemClick: function () {
- this.$emit("delete",this.index); //通过$emit向上一层触发事件
- }
- }
当我们点击子组件的时候，子组件向外触发一个delete事件，我们可以在父组件监听这个事件：
- <todo-item v-bind:content="item"
- V-bind:index="index"
- v-for="(item,index) in List"
- @delete="handleItemDelete"> //传值（content，index），监听delete事件执行handleItemDelete方法
- </todo-item>
然后在父组件中定义handleItemDelete方法：
- methods: {
- handleItemDelete: function(index) {
- this.List.splice(index,1)
- console.log("你删除了下标为" + index + "的内容！")
- }
- }
因为要实现点击删除指定的内容项，所以我们要用到splice方法以及数组下标index，这样我们就完成了。
回顾一下
- 父组件向子组件传值
通过v-bind的形式来传递，子组件一定要通过props接收
- 子组件向父组件传值
通过$emit方式，向上一层触发事件，父组件监听子组件的触发事件
完整代码
- <div id="app">
- <input type="text" v-model="inputValue"/>
- <button @click="btnClick">提交</button>
- <ul>
- <todo-item v-bind:content="item"
- V-bind:index="index"
- v-for="(item,index) in List"
- @delete="handleItemDelete"> //传值（content，index），监听delete事件执行handleItemDelete方法
- </todo-item>
- </ul>
- </div>
- var TodoItem = {
- props:['content','index'], //接收
- template:"<li @click='handleItemClick'>{{content}}</li>",//v-on:click简写@click
- methods: {
- handleItemClick: function () {
- this.$emit("delete",this.index); //通过$emit向上一层触发事件
- }
- }
- }
- var app = new Vue({
- el:'#app',
- components:{
- TodoItem:TodoItem
- },
- data: {
- List: [],
- inputValue: ''
- },
- methods: {
- btnClick: function () {
- this.List.push(this.inputValue)
- this.inputValue = ''
- },
- handleItemDelete: function(index) {
- this.List.splice(index,1)
- console.log("你删除了下标为" + index + "的消息！")
- }
- }
- })
效果
完。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
