父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 向上給父組件發(fā)送消息。

父組件： <div><div style="background:#34495E;color: #fff; padding:20px"><p style="margin-bottom: 20px">這是父組件</p><div style="background:#E74C3C;color: #fff; padding:20px; margin-top:20px"><p>接受來自子組件的內容: </p><p style="margin-top:20px;background:#fff; color:#000; padding:5px; line-height:1.5;">{{hello}}</p></div></div><div style="background:#34495E;color: #fff; padding:20px; margin-top:20px"><p style="margin-bottom: 20px">這是子組件</p><musicsearch @trans="transContent" :pupu="hello" :info="info"></musicsearch></div></div> export default {components: {musicsearch},data() {return {hello: '',info: ''}},methods: {transContent(msgs) {this.hello = msgs;this.info = msgs;}} }

　　

子組件： <div><div style="margin-top:20px; background:#E74C3C; padding:10px;"><input type="text" ref="ipt" style="border:none; margin-top:10px; margin-bottom: 20px; border-radius:4px; width:90%; height:18px; padding:5px; line-height:18px; border:1px solid #fff"><button @click="sendVal()" style="margin-bottom: 20px; border:none; outline:none; border-radius:4px; height:28px; line-height:28px; background:#F1C40F; color:#fff;">向父組件發(fā)送內容按鈕</button></div><div style="margin-top:20px; background:#E74C3C; padding:10px;"><button @click="click()" style=" margin-top:10px; border:none; outline:none; border-radius:4px; height:28px; line-height:28px; background:#F1C40F; color:#fff;">接受來自父組件的內容按鈕</button><div style="margin-top:20px;background:#fff; color:#000; padding:5px; line-height:1.5;">{{msg}}</div></div></div>export default {name: 'girl-group',props: {info: ''},data() {return {msg: ''}},methods: {sendVal() {this.$emit('trans', this.$refs.ipt.value)；//這里在父組件使用v-on來監(jiān)聽子組件上的自定義事件($emit的變化),一旦發(fā)生變化click方法里的值就會跟著改變，調用click事件可看到信息},click() {this.msg = this.info;}} }

　　

　　

　　

　　

轉載于:https://www.cnblogs.com/kymming/p/7325119.html

總結

以上是生活随笔為你收集整理的Vue父子组件间的通信的全部內容，希望文章能夠幫你解決所遇到的問題。

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