子組件child.vue源碼：

<template><div class="child"><button @click="sendData">點擊向父組件傳數據</button></div> </template><script type="text/ecmascript-6"> export default {data() {return {msg: '子組件數據'}},methods: {sendData() {this.$emit('childHadSend', this.msg)}} } </script><style></style> 解釋：點擊button觸發sendData方法，sendData方法中使用this.$emit方法向父組件派發了一個childHadSend事件，第二個參數為需要傳遞的數據。

父組件源碼：

<template><div id="app"><child @childHadSend="getData"></child><p>{{childData}}</p></div> </template><script type="text/ecmascript-6">import Child from 'components/child/child'export default {data() {return {childData: ''}},methods: {getData(data) {this.childData = data}},components: {Child}} </script><style> </style>解釋：父組件接收到子組件派發的childHadSend方法，觸發了getData方法，并將this.childData設置為傳過來的data值，使得<p></p>中的值顯示為子組件數據。

點擊button后的運行結果：

總結

以上是生活随笔為你收集整理的Vue2.0中子组件向父组件传递数据的方法，以完整demo演示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。