Question

我有一个模态和Vue函数，当单击一个按钮时，该函数会成功打开一个模态（您可以通过在函数中将showModal设置为true来看到这种情况）

我的问题：在函数中有两个变量asset, eventObj正在控制台中登录，但是我不知道如何将值从那里传递到模式中。 click事件和模式都可以正常工作，我只需要知道如何将被单击项的变量作为值传递给模式

    <script type="text/x-template" id="modal-template">
    <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
              default header
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              default body
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
              <button class="modal-default-button" @click="$emit('close')">
                OK
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
    </transition>
    </script>

    <modal v-if="showModal" @close="showModal = false">
    <!--
    you can use custom content here to overwrite
    default content
    -->
    <h3 slot="header">custom header</h3>
    </modal>



    Vue.component('modal', {
      template: '#modal-template'
    })

    export default {
        data () {
            return {
                events: [

                ],
                showModal: false        }
        },
        methods: {

          eventClick: function(e) {
          var eventObj = e.event;
          var asset = e.event.extendedProps.asset;
          this.showModal = true;
          console.log(asset);

        },
    }
    </script>

Answer 1

我不确定我是否完全了解您想做什么，但是我认为您的目标是在打开父模时将参数从父模传递到模态。我认为这样做的最好方法是将对象存储在变量中，然后将其作为模态组件赋予属性。语法是这样的：

在模态组件本身中：

props: {
    eventObj: Object,
    asset: Object
}

在父组件中，您需要在数据中声明变量（具有空值或空值）并在eventClick函数中设置值，然后才能通过切换标志打开模式。

data() {
   return {
      events: [...],
      showModal: false,
      eventObj: {},
      asset: {}
   }
}
methods: {
   eventClick: function(e) {
      this.eventObj = e.event;
      this.asset = e.event.extendedProps.asset;
      this.showModal = true;
   }
}

在父组件的模板部分中：

<modal 
    v-if="showModal" 
    v-bind:eventObj="eventObj" 
    v-bind:asset="asset" 
    @close="showModal = false">
      <!-- your stuff... --!>
</modal>

将vue函数数据传递到模态

1 个答案: