Vue兩個同級組件傳值實現(xiàn)
Vue組件之間是有聯(lián)系的,避免不了組件之間要互相傳值,父給子使用v-bind綁定自定義屬性和使用props來接受
子給父使用@自定義事件='函數(shù)' this.$emit('自定義事件','要發(fā)送的內(nèi)容'),子組件通過$emit來觸發(fā)父組件的函數(shù)來實現(xiàn)
但是兩個同級組件之間這么互相傳值
<div id='app'> <children1></children1> <children2></children2> </div> <script> var children1 = {}; var children2 = {}; var vm = new Vue({ el:'#app', components:{ children1, children2 } }) </script>
現(xiàn)在要將children1組件中的數(shù)據(jù)傳給children2組件
主要使用到vue實例中的$on()和$emit()
<div id='app'> <children1></children1> <children2></children2> </div> <script> var Event = new Vue({}); // 創(chuàng)建一個vue實例用來作為傳值的媒介 var children1 = { template:` <div> <button @click='send'>點我給children2組件發(fā)送數(shù)據(jù)</button> </div> `, data(){ return { msg:'我是要給children2發(fā)送的數(shù)據(jù)' } }, methods:{ send(){ Event.$emit('go',this.msg) } } }; var children2 = { template:` <div> <h2>從children1組件接收到的值:{{msg1}}</h2> </div> `, data(){ return{ msg1:'' } }, created(){ Event.$on('go',(v) => { // 必須使用箭頭函數(shù)因為this this.msg1 = v; }) } }; var vm = new Vue({ el:'#app', components:{ children1, children2 } }) </script>
chilren1組件要發(fā)送數(shù)據(jù)使用的是Event.$emit()
chilren2組件要接收數(shù)據(jù)使用Eevent.$on()
到此這篇關(guān)于Vue兩個同級組件傳值實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 同級組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-01-01Vue項目結(jié)合Vue-layer實現(xiàn)彈框式編輯功能(實例代碼)
這篇文章主要介紹了Vue項目中結(jié)合Vue-layer實現(xiàn)彈框式編輯功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03vue中v-if?和v-permission?共同使用的坑及解決方案
這篇文章主要介紹了vue中v-if?和v-permission?共同使用的坑及解決方案的相關(guān)資料,需要的朋友可以參考下2023-07-07