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日

相關文章