VUE父子组件中的数据传递

VUE组件化中的数据传递

父组件向子组件传递数据

首先需要在引用子组件的时候使用v-bind:content进行绑定父组件的数据，然后使用子组件中的props:[‘content’]进行接收绑定的数据。

子组件向父组件传递数据

当想让子组件向父组件传递数据的时候，首先要在子组件里使用this.$emit()发出事件操作，然后在父组件中绑定该事件的行为。我这个例子的意思是：我使用了子组件向父组件传值实现了TodoList的删除单项功能。首先在子组件中使用this.$emit(“delete”,this.index),发出delete事件，并附带一个this.index参数，然后在父组件中使用@delete="handItemDelete"绑定delete事件的行为，最后handItemDelete接收到了this。index参数，再使用this.list.splice(index,1)删除所点击的列表项。

总结

父子组件间相互传递数据不算太复杂，只需要记住父组件向子组件传递数据时的关键步骤：v-bind:content和props:[‘content’]，子组件向父组件传递数据时的关键步骤：this.$emit(“delete”)和@delete=“handItemDelete”，即可。