使用Promise作为弹窗与业务组件间的数据传输

使用Promise作为弹窗与业务组件间的数据传输

根业务组件中 testRootView.vue

<template>
  <div class="testRootView">
    <my-view></my-view>
    <my-message-box v-model="componentData"></my-message-box>
  </div>
</template>

<script>
import myView from '@/views/a_test/myView'
import myMessageBox from '@/views/a_test/myMessageBox'

// eslint-disable-next-line no-unused-vars
import {ajaxGet} from '@/assets/util/ajax'

export default {
  name: 'testRootView', // 组件名称
  components: {myView, myMessageBox},
  props: [], // 组件参数
  model: { // 用于 props 绑定父级 v-model
  },
  filters: { // 过滤器
  },
  computed: { // 计算属性
  },
  watch: { // 监听属性
  },
  data () {
    return {
      /*
      * 页面状态
      * */

      /*
      * 页面数据
      * */
      componentData: ''
    }
  },
  methods: {
  },
  beforeCreate () { // 播放加载动画
  },
  created () { // 结束加载动画, 发起异步请求
  },
  mounted () { // DOM构建完成, 即将显示页面
    this.$on('open-my-message-box', (payload) => {
      this.componentData = {...payload, isShow: true}
    })
  },
  updated () { // view重新渲染, 数据更新
  },
  beforeDestroy () { // 组件实例销毁之前
  }
}
</script>

<style scoped>

</style>

业务组件中 myView.vue

<template>
  <div class="myView">
    <button @click="handleClick">点击用弹窗</button>
  </div>
</template>

<script>
export default {
  name: 'myView', // 组件名称
  components: {},
  props: [], // 组件参数
  model: { // 用于 props 绑定父级 v-model
  },
  filters: { // 过滤器
  },
  computed: { // 计算属性
  },
  watch: { // 监听属性
  },
  data () {
    return {
      /*
      * 页面状态
      * */

      /*
      * 页面数据
      * */
    }
  },
  methods: {
    handleClick () {
      new Promise((resolve, reject) => {
        const payload = {
          resolve,
          reject,
          params: {
            param1: '哈哈哈哈',
            param2: '666666666'
          }
        }
        // $dispatch 向上通知
        this.$dispatch('open-my-message-box', payload)
      })
        .then((data) => {
          console.log('then', data)
        })
        .catch((error) => {
          console.log('catch', error)
        })
    }
  },
  beforeCreate () { // 播放加载动画
  },
  created () { // 结束加载动画, 发起异步请求
  },
  mounted () { // DOM构建完成, 即将显示页面
  },
  updated () { // view重新渲染, 数据更新
  },
  beforeDestroy () { // 组件实例销毁之前
  }
}
</script>

<style scoped>

</style>

弹窗组件中 myMessageBox.vue

<template>
  <div class="myMessageBox" v-if="componentData.isShow">
    <div>我的组件</div>
    <div>{{receiveParams}}</div>
    <button @click="handleClick">关闭组件</button>
  </div>
</template>

<script>
export default {
  name: 'myMessageBox', // 组件名称
  components: {},
  props: ['componentData'], // 组件参数
  model: { // 用于 props 绑定父级 v-model
    prop: 'componentData',
    event: 'component-data-callback'
  },
  filters: { // 过滤器
  },
  computed: { // 计算属性
  },
  watch: { // 监听属性
    componentData: {
      handler (newVal) {
        const {resolve, reject, params} = newVal
        this.resolve = resolve
        this.reject = reject
        this.receiveParams = params
      }
    }
  },
  data () {
    return {
      /*
      * 页面状态
      * */
      resolve: '',
      reject: '',
      receiveParams: ''
      /*
      * 页面数据
      * */
    }
  },
  methods: {
    handleClick () {
      const componentData = {...this.componentData, isShow: false}
      this.$emit('component-data-callback', componentData)
      this.resolve('从弹出框中返回了东西了~~~')
    }
  },
  beforeCreate () { // 播放加载动画
  },
  created () { // 结束加载动画, 发起异步请求
  },
  mounted () { // DOM构建完成, 即将显示页面
  },
  updated () { // view重新渲染, 数据更新
  },
  beforeDestroy () { // 组件实例销毁之前
  }
}
</script>

<style scoped>

</style>