子組件child.vue源碼：

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

父組件源碼：

<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>解釋：父組件接收到子組件派發(fā)的childHadSend方法，觸發(fā)了getData方法，并將this.childData設(shè)置為傳過來的data值，使得<p></p>中的值顯示為子組件數(shù)據(jù)。

點(diǎn)擊button后的運(yùn)行結(jié)果：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。