如何在Vue.js模态框中向内部SharePage组件传递payload？

如下所示的模态框通过this.$store.watch触发打开，请问能否直接通过this.$modal.show('preview-share-modal', {payload: value.payload})将payload对象传递给模态框内的SharePage组件？

原代码 #

<modal name="preview-share-modal" height="auto" :id="'share-modal'" :adaptive="true">
  <div class="modal-wrap share-modal-container" v-touch:swipe.bottom="closeShareModal">
    <div class="close-button">
      <button @click="closeShareModal"><i class="far fa-times"></i></button>
    </div>
    <SharePage></SharePage>
  </div>
</modal>

this.$store.watch(
  (state) => {return { show: state.showShareModal, payload: state.props }},
  (value) =>  {
    if(value.show === true) {
      this.$modal.show('preview-share-modal', {payload: value.payload});
    }
    else
      this.$modal.hide('preview-share-modal')
  }
)

可以实现，但需要做两处调整：

1. 在模态框模板中传递参数给SharePage
   调用this.$modal.show时传入的第二个参数会作为模态框组件的params属性（以vue-js-modal库为例），直接在模板里把params.payload绑定给SharePage的props：

<modal name="preview-share-modal" height="auto" :id="'share-modal'" :adaptive="true">
  <div class="modal-wrap share-modal-container" v-touch:swipe.bottom="closeShareModal">
    <div class="close-button">
      <button @click="closeShareModal"><i class="far fa-times"></i></button>
    </div>
    <SharePage :payload="params.payload"></SharePage>
  </div>
</modal>

2. SharePage组件声明接收payload props
   确保SharePage组件定义了对应的props来接收这个值：

// SharePage组件代码示例
export default {
  props: {
    payload: {
      type: Object,
      required: false // 根据业务需求调整是否必填
    }
  }
}

这样就能成功把payload传递给SharePage组件了。

内容的提问来源于stack exchange，提问作者Alexandru Oprescu