Question

我试图制作一个插件只是为了显示具有一些自定义个性化的模式div，所以我想到了一个带有自定义组件的插件。想法是调用应该显示模式框（组件）的插件，但我不明白如何将插件方法props传递给组件。

我有这个插件

import Modal from './components/Modal'

const ModalComponent = {
  install (Vue) {
    Vue.component('modal', Modal)

    Vue.mixin({
      data () {
        return {
          status: null,
          modalMessage: null,
          show: false
        }
      },
      component: {
        Modal
      },
      methods: {
        setMessage (status, modalMessage) {

          console.log(status)
          console.log(modalMessage)
          this.status = status
          this.modalMessage = modalMessage
          this.show = true

        }
      }
    })
  }

}

export default ModalComponent

我可以通过这种方式this.setMessage(res.status, res.message)

在其他组件中调用该插件

组件是这个

<template>
    <b-modal
      v-model="show"
      centered
      cancel-disabled
      :title="title"
      :header-bg-variant="header_bg"
    ><p class="my-4">{{modalMessage}}</p>
    </b-modal>
</template>


<script>
export default {
    name: "modal",
    data() {

        return {
            show: false,
            title: null,
            modalMessage: null,
            header_bg: null
        }
    },
    props: {
            show: Boolean,
            title: String,
            modalMessage: String,
            header_bg: String
    }

}
</script>

如何告诉组件使用插件中的道具显示？我错过了使用插件方法向其发送道具的段落

Answer 1

问题似乎是您的插件未生成任何元素。您正在使用mixin在每个组件上创建一个方法，但这将假定每个组件的模板中的每个都有一个<Modal :status="status" :modalMessage="modalMessage" :show="true" />

我建议使用其他方法...

在主模板中，添加模态实例。然后，您可以使用某种全局状态。我更喜欢使用vuex，因为您可以使用vuex状态来管理道具，并使用具有所需有效负载的全局可用动作（commit）。另外，您可以使用vue内部构件来修改状态，但是如果您已经在使用vuex，则这可能是最简单的选择。

Vue2.js-在自定义插件中使用自定义组件-如何传递道具？

1 个答案:

我建议使用其他方法...