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

Question

我有一个带有子组件和道具的视图，在单击 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>

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

Answer 1

在模态组件中，通过发出事件 @click="$emit('close')" 替换 @click="display = !display"

并将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,
   required: true
  },