Vue之组件间的传值

2019年1月12日23:38:17 发表评论 阅读(441)

Vue之组件间的传值

上一篇文章中的实例用到了子组件向父组件传值的方法,这篇文章通过todolist的实例来说一下子组件向父组件传值和父组件向子组件传值的方法,以及最终实现点击todolist添加的内容实现删除的效果。

既然实现点击删除的效果,那么我们可以先在生成的li标签里面绑定一个click事件,方法写在子组件的methods中:

  1.     var TodoItem = {
  2.     props:['content','index'],  //接收
  3.     template:"<li @click='handleItemClick'>{{content}}</li>",//v-on:click简写@click
  4.     methods: {
  5.         handleItemClick: function () {
  6.             this.$emit("delete",this.index); //通过$emit向上一层触发事件
  7.         }
  8.     }
  9. }

那么我们的目标是删除掉选中的数据,我们可以这样做,数据是放在父组件中,父组件决定子组件该怎么显示,当我们点击子组件的时候,子组件把对应的内容传给父组件,父组件来改变数据,实现的代码如下:

  1. methods: {
  2.     handleItemClick: function () {
  3.         this.$emit("delete",this.index); //通过$emit向上一层触发事件
  4.     }
  5. }

当我们点击子组件的时候,子组件向外触发一个delete事件,我们可以在父组件监听这个事件:

  1. <todo-item v-bind:content="item"
  2.            V-bind:index="index"
  3.            v-for="(item,index) in List"
  4.            @delete="handleItemDelete"//传值(content,index),监听delete事件执行handleItemDelete方法
  5. </todo-item>

然后在父组件中定义handleItemDelete方法:

  1. methods: {
  2.             handleItemDelete: function(index) {
  3.                 this.List.splice(index,1)
  4.                 console.log("你删除了下标为" + index + "的内容!")
  5.             }
  6.         }

因为要实现点击删除指定的内容项,所以我们要用到splice方法以及数组下标index,这样我们就完成了。

回顾一下

  • 父组件向子组件传值

通过v-bind的形式来传递,子组件一定要通过props接收

  • 子组件向父组件传值

通过$emit方式,向上一层触发事件,父组件监听子组件的触发事件

完整代码

  1. <div id="app">
  2.     <input type="text" v-model="inputValue"/>
  3.     <button @click="btnClick">提交</button>
  4.     <ul>
  5.         <todo-item v-bind:content="item"
  6.                    V-bind:index="index"
  7.                    v-for="(item,index) in List"
  8.                   @delete="handleItemDelete"//传值(content,index),监听delete事件执行handleItemDelete方法
  9.         </todo-item>
  10.     </ul>
  11. </div>
  12.     var TodoItem = {
  13.     props:['content','index'],  //接收
  14.     template:"<li @click='handleItemClick'>{{content}}</li>",//v-on:click简写@click
  15.     methods: {
  16.         handleItemClick: function () {
  17.             this.$emit("delete",this.index); //通过$emit向上一层触发事件
  18.         }
  19.     }
  20. }
  21. var app = new Vue({
  22.     el:'#app',
  23.     components:{
  24.         TodoItem:TodoItem
  25.     },
  26.     data: {
  27.         List: [],
  28.         inputValue: ''
  29.     },
  30.     methods: {
  31.         btnClick: function () {
  32.             this.List.push(this.inputValue)
  33.             this.inputValue = ''
  34.         },
  35.         handleItemDelete: function(index) {
  36.             this.List.splice(index,1)
  37.             console.log("你删除了下标为" + index + "的消息!")
  38.         }
  39.     }
  40. })

 效果

Vue之组件间的传值

 

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛