上一篇我写了父组件如何向子组件下发数据的操作,今天我们来聊聊子组件如何向父组件发送数据。在Vue.js中是通过事件来完成子组件向父组件发送数据的。
代码沿用上一篇的结构。上代码:
初始状态
子组件 childOne.vue中 先写好需要发送的数据
父组件app.vue
效果:
然后开始进行数据发送:
在子组件中增加一个按钮并未按钮绑定一个发送数据的事件sendData:在方法中调用$emit:
官方文档描述:
触发当前实例上的事件。附加参数都会传给监听器回调。
用法:$emit(“方法”,“传入参数”);
在父组件中接收数据:
需要v-on绑定一个与子组件中的方法一致的接收的方法:
最终效果如下:点击发送按钮,我们就可以在页面上看到来自子组件的数据了:
感觉有点复杂…
下一篇讲兄弟组件之间如何传递数据。