Javascript 将变量传递到Vue js模态组件

用户单击“编辑”后，我正在初始化

这是模态元素：

     <modal name="edit-time">
        <div class="row col"">
            <div class="time">
                <div class="form-row mb-3">
                    <div class="col-4">
                        <label for="time">Time</label>
                    </div>
                    <div class="col-8">
                        <input type="time" v-model="time" id="time" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </modal>

您可以在
@beforeOpen
事件中将道具绑定到本地数据

<template>
    <modal name="edit-time" @before-open="beforeOpen">
      <div class="row col">
          <div class="time">
              <div class="form-row mb-3">
                  <div class="col-4">
                      <label for="time">Time</label>
                  </div>
                  <div class="col-8">
                      <input type="time" 
                        v-model="localTime" 
                        id="time" 
                        class="form-control">
                  </div>
              </div>
          </div>
      </div>
  </modal>
</template>

<script>
export default {
  data() {
    return {
      localTime: null
    }
  },
  methods: {
    beforeOpen(event) {
      this.localTime = event.params.time
    }
  }
}
</script>


时间
导出默认值{
数据（）{
返回{
localTime:null
}
},
方法：{
开放前（活动）{
this.localTime=event.params.time
}
}
}

<script>

    export default {
        name: 'demo',
        components: {
        },
        data () {

        },
        created () {

        },
        computed: {

        },
        methods: {
            showEditModal () {
                time = "15:15";
                this.$modal.show('edit-time', { time: time });
            },
            hideModal () {
                this.$modal.hide('edit-time');
            }
        },
    }
</script>

<template>
    <modal name="edit-time" @before-open="beforeOpen">
      <div class="row col">
          <div class="time">
              <div class="form-row mb-3">
                  <div class="col-4">
                      <label for="time">Time</label>
                  </div>
                  <div class="col-8">
                      <input type="time" 
                        v-model="localTime" 
                        id="time" 
                        class="form-control">
                  </div>
              </div>
          </div>
      </div>
  </modal>
</template>

<script>
export default {
  data() {
    return {
      localTime: null
    }
  },
  methods: {
    beforeOpen(event) {
      this.localTime = event.params.time
    }
  }
}
</script>