Vue–子組件互相傳值，子組件來回傳值，傳值反覆橫跳

• 2020 年 12 月 12 日
• 筆記
• VUE

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}`)
    })
})

所有代碼

• 父組件

<template>
  <div class="home">
    <button-list :p-vue="pVue" />
    <div style="height: 20px" />
    <table-list :p-vue="pVue" />
  </div>
</template>

<script>
import Vue from 'vue'
import ButtonList from './components/button-list'
import TableList from './components/table-list'

export default {
  name: 'Home',
  data() {
    return {
      pVue: new Vue()
    }
  },
  components: {
    ButtonList,
    TableList
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

• 子組件一

<template>
  <div>
    <el-input v-model="code" placeholder="過程在控制台" />
    <el-row style="margin-top: 20px">
      <el-button :disabled="code ===''" type="primary" @click="send1()">單項發送</el-button>
      <el-button :disabled="code ===''" type="primary" @click="send2()">發送並接收回傳</el-button>
      <el-button :disabled="code ===''" type="primary" @click="send3()">發送接收並再發送</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: ''
    }
  },
  props: {
    pVue: {
      type: Object
    }
  },
  methods: {
    /**
     * 單項發送
     */
    send1() {
      this.pVue.$emit('send1', {
        code: this.code
      })
    },
    /**
     * 發送並接收回調
     */
    send2() {
      this.pVue.$emit('send2', {
        code: this.code
      }, (data) => {
        console.log(`按鈕組件 => 接收回傳 ${data.code}`)
      })
    },
    /**
     * 發送接收並再發送
     */
    send3() {
      this.pVue.$emit('send3', {
        code: this.code
      }, (data, cb) => {
        console.log(`按鈕組件 => 接收回傳 ${data.code}`)
        cb({
          code: data.code
        })
      })
    }
  }
}
</script>

• 子組件二

<template>
  <el-form label-width="80px">
    <el-form-item label="參數1">
      <el-input disabled v-model="code1"></el-input>
    </el-form-item>
    <el-form-item label="參數2">
      <el-input disabled v-model="code2"></el-input>
    </el-form-item>
    <el-form-item label="參數3">
      <el-input disabled v-model="code3"></el-input>
    </el-form-item>
    <el-form-item label="參數4">
      <el-input disabled v-model="code4"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      code1: '',
      code2: '',
      code3: '',
      code4: ''
    }
  },
  props: {
    pVue: {
      type: Object
    }
  },
  watch: {
    code1(newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
    }
  },
  mounted() {
    if (this.pVue) {
      /**
       * 單項接收
       */
      this.pVue.$on('send1', data => {
        this.code1 = data.code
        console.log(`表格組件 => 接收參數 ${data.code}`)
        this.pVue.boo = true
      })
      /**
       * 發送並接收回調
       */
      this.pVue.$on('send2', (data, cb) => {
        this.code2 = data.code
        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}`)
        })
      })
    }
  }
}
</script>

2020年12月12日