Vue兩個同級組件傳值實現

Vue組件之間是有聯系的，避免不了組件之間要互相傳值，父給子使用v-bind綁定自定義屬性和使用props來接受

子給父使用@自定義事件=’函數’ this.$emit(’自定義事件’,’要發送的內容’)，子組件通過$emit來觸發父組件的函數來實現但是兩個同級組件之間這么互相傳值

<div id=’app’> <children1></children1> <children2></children2></div><script> var children1 = {}; var children2 = {}; var vm = new Vue({ el:’#app’, components:{ children1, children2 } })</script>

現在要將children1組件中的數據傳給children2組件

主要使用到vue實例中的$on()和$emit()

<div id=’app’> <children1></children1> <children2></children2> </div> <script> var Event = new Vue({}); // 創建一個vue實例用來作為傳值的媒介 var children1 = { template:` <div> <button @click=’send’>點我給children2組件發送數據</button> </div> `, data(){ return { msg:’我是要給children2發送的數據’ } }, methods:{ send(){ Event.$emit(’go’,this.msg) } } }; var children2 = { template:` <div> <h2>從children1組件接收到的值：{{msg1}}</h2> </div> `, data(){ return{ msg1:’’ } }, created(){ Event.$on(’go’,(v) => { // 必須使用箭頭函數因為this this.msg1 = v; }) } }; var vm = new Vue({ el:’#app’, components:{ children1, children2 } })</script>

chilren1組件要發送數據使用的是Event.$emit()chilren2組件要接收數據使用Eevent.$on()

到此這篇關于Vue兩個同級組件傳值實現的文章就介紹到這了,更多相關Vue 同級組件傳值內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！