vue2.0中的组件通信2——子组件向父组件传递数据

上一篇我写了父组件如何向子组件下发数据的操作,今天我们来聊聊子组件如何向父组件发送数据。在Vue.js中是通过事件来完成子组件向父组件发送数据的。
代码沿用上一篇的结构。上代码:
初始状态
子组件 childOne.vue中 先写好需要发送的数据
vue2.0中的组件通信2——子组件向父组件传递数据_第1张图片
父组件app.vue
vue2.0中的组件通信2——子组件向父组件传递数据_第2张图片
效果:
vue2.0中的组件通信2——子组件向父组件传递数据_第3张图片

然后开始进行数据发送:
在子组件中增加一个按钮并未按钮绑定一个发送数据的事件sendData:在方法中调用$emit:
官方文档描述:

触发当前实例上的事件。附加参数都会传给监听器回调。

用法:$emit(“方法”,“传入参数”);
vue2.0中的组件通信2——子组件向父组件传递数据_第4张图片
在父组件中接收数据:
需要v-on绑定一个与子组件中的方法一致的接收的方法:
vue2.0中的组件通信2——子组件向父组件传递数据_第5张图片
最终效果如下:点击发送按钮,我们就可以在页面上看到来自子组件的数据了:
vue2.0中的组件通信2——子组件向父组件传递数据_第6张图片
感觉有点复杂…
下一篇讲兄弟组件之间如何传递数据。

你可能感兴趣的:(Vue学习)