Vue--子组件互相传值，子组件来回传值，传值反复横跳

Vue--子组件传值，子组件来回传值，子组件传值反复横跳

我不不仅要子组件之间直接传值，我还要传过去再传回来，传回来再传过去，子组件直接反复横跳

解决问题

1. 给组件传值，并不知道改值的校验结果
2. 同一个组件，在不同的引用中校验方式完全不一样，需要将校验方式放到组件外面的情况

单项发送

• 子组件一发送参数

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日