Vue--子元件互相傳值,子元件來回傳值,傳值反覆橫跳
阿新 • • 發佈:2020-12-12
# 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日