带有传送模态 vuejs3 的动态道具

问题描述

我有一个带有子组件和道具的视图，在单击 tr 时我们显示具有不同值的模式，因此在单击 TR 选项卡后设置的属性不同

  <template>
   <ModalOrderDetail :display="modal_display" :id_order="order_id"/>
   <div>
   <table class="table table-striped">
   <thead class="table-dark">
    <tr>
      <th scope="col">ID</th>

    </tr>
  </thead>
  <tbody>
    <tr
      v-for="order in result.orders"
      :key="order.id"
      @click="
        $emit('update:id_order',order.id)
        showModal()
      "
    >
      <th scope="row">{{ order.id }}</th>      
    </tr>
  </tbody>
</table>
</div>

<script>
import ModalOrderDetail from '@/components/ModalOrderDetail.vue'
import OrderService from '@/services/OrderService.js'
export default {
components: {
  ModalOrderDetail
 },props: {
  id_order: {
  type: Number,required: true
  }
},data() {
  return {
  result: [],customer: null,modal_display: true,order_id:null
}
},methods: {
   showModal() {
    console.log(this.modal_display)
    console.log(this.order_id)
  }
},created() {
 OrderService.getorders()
  .then(response => {
    this.result = response.data
    console.debug(this.result.orders)
  })
  .catch(error => {
    console.log(error)
  })
}

}

这里是模态

   <template>

  <teleport v-if="display" to="#modals">
  <div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        <p>Commande N°</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button
          type="button"
          class="btn btn-secondary"
          @click="display = !display"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>
 </teleport>
</template>

  <script>

  export default {
  name: 'ModalOrderDetail',props: {
   display: {
   type: Boolean,required: true
  },id_order: {
  type: Number,required: true
   }
 },methods: {
  print() {
  console.log(this.id_order)
  console.log(this.display)
  }
}

}
</script>

 <style scoped>
 .modal {
  display: block;
  position: absolute;
 }
</style>

问题我有一个突变道具错误，我真的不知道如何将动态道具传递给我的模态并使其正常工作？

解决方法

在模态分量替换 @click="display = !display"通过发射一个事件 @click="$emit('close')"

和附加close到emits选项

 export default {
  name: 'ModalOrderDetail',emits: ['close'],props: {
   displat: {
   type: Boolean,required: true
  },

然后在父组件做：

<ModalOrderDetail @close="modal_display=!modal_display" :display="modal_display" :id_order="order_id"/>

但是，我建议使用v-model，而不是使用发射事件和道具：

<ModalOrderDetail v-model="modal_display" :id_order="order_id"/>

的

display丙改变为modelValue：

<button type="button" class="btn btn-secondary" @click="$emit('update:modelValue',!modelValue)" >
...
 export default {
  name: 'ModalOrderDetail',emits: ['update:modelValue'],props: {
   modelValue: {
   type: Boolean,