Vue初学之简单的组件间传值实现教程

#Vue初学之简单的组件间传值实现教程| 来源: 网络整理| 查看: 265

父组件向子组件传值：

父组件通过v-bind绑定值：

commit

父组件通过v-for遍历list,获得每一个item，:content未v-bind:content的简写，把item的值绑定到content字段传给子组件。

在子组件中通过props接收从父组件传过来的值。

var TodoList = { props: ['content','index'], template: "{{content}}", methods: { handleItemClick: function() { this.$emit("delete",this.index) } } }

在子组件中通过插值表达式{{}}的方式可以将接收到的content值绑定到标签上。

点击hello ,删除hello

在子组件中通过$emit方法触发事件，如当点击标签时，触发delete事件删除当前的标签：

methods: { handleItemClick: function() { this.$emit("delete",this.index) } }

在父组件中监听delete事件，

如果监听到就根据当前的index把item从list中删除：

handleItemDelete: function(index) { this.list.splice(index,1) }

【本文地址】

今日新闻