# Vue--子元件傳值，子元件來回傳值，子元件傳值反覆橫跳 **我不不僅要子元件之間直接傳值，我還要傳過去再傳回來，傳回來再傳過去，子元件直接反覆橫跳** 解決問題 1. 給元件傳值，並不知道校驗結果 2. 兩個子元件之間傳值 3. 同一個元件，在不同的引用中校驗方式完全不一樣，需要將校驗方式放到元件外面的情況 ## 單項傳送 - 子元件一發送引數 ``` send1() { this.pVue.$emit('send1', { code: this.code }) }, ``` - 子元件二接收引數 ``` this.pVue.$on('send1', data => { this.code1 = data.code console.log(`表格元件 => 接收引數 ${data.code}`) this.pVue.boo = true }) ``` ## 傳送並接收回參 子元件一發送，子元件二接收，進行邏輯處理後返回元件一 - 子元件一 ``` send2() { this.pVue.$emit('send2', { code: this.code }, (data) => { console.log(`按鈕元件 => 接收回傳 ${data.code}`) }) }, ``` - 子元件二 ``` this.pVue.$on('send2', (data, cb) => { this.code2 = data.code console.log(`表格元件 => 接收引數 ${data.code}`) // 個人邏輯... 然後返回引數 cb({ code: data.code }) }) ``` ## 傳送並接收會參並根據會參再發送 - 子元件一 ``` send3() { this.pVue.$emit('send3', { code: this.code }, (data, cb) => { console.log(`按鈕元件 => 接收回傳 ${data.code}`) cb({ code: data.code }) }) } ``` - 子元件二 ``` this.pVue.$on('send3', (data, cb) => { this.code3 = data.code console.log(`表格元件 => 接收引數 ${data.code}`) // 個人邏輯... 然後返回引數 cb({ code: data.code }, () => { this.code4 = data.code console.log(`表格元件 => 再次接收引數 ${data.code}`) }) }) ``` ## 所有程式碼 - 父元件 ``` ``` - 子元件一 ``` ``` - 子元件二 ``` ``` > 2020年12月12日