打开子组件VueJs中add元素的模式

Question

我有一个按钮，应该从孩子那里打开一个模式，这会添加一个新客户。

如果我的代码仅在父级中，则可以使用，但是我尝试在子级中实现。

父母

<b-button @click="openModal">Add new customer</b-button>
<add-new-customer ref="modal" v-if="addCustomer"></add-new-customer>

openModal() {
   this.$refs.modal.openModalCh()
},

孩子

<b-modal
        id="modal-prevent-closing"
        ref="modal"
        title="Add new customer"
        @ok="addCustomer"
>
...code..
</b-modal>
    <add-new-customer ref="modal" v-if="addCustomer" @added="onAddCustomer"></add-new-customer>
    addCustomer() {
       ..code for post a new customer..
    }
    openModal() {
       this.$refs.modal.openModalCh()
    },

Answer 1

您可以将$attr绑定到模态，该模态包含从父代传递给子代的所有属性。在这种情况下，我们将其用作ID。

通过这种方式，您可以为模态在父级中指定一个ID，然后使用该ID来打开模态而无需参考。

父母

<template>
  <div>
      <!-- Use the id that you've given the modal -->
      <b-btn @click="$bvModal.show('add-customer')">Open Modal</b-btn>
      <add-customer-modal id="add-customer" title="add old customer"></add-customer-modal>
  </div>
</template>

<script>
import AddCustomerModal from './components/AddCustomerModal.vue'

export default {
  name: "App",
  components: {
    AddCustomerModal
  }
};
</script>

AddCustomerModal.vue（子级）

<template>
  <b-modal
    v-bind="$attrs"
    title="Add new customer"
    @ok="addCustomer"
  ></b-modal>
</template>

<script>
  export default {
    methods: {
      addCustomer() {
        /* Insert logic here */
        console.log('Customer added!')
      }
    }
  }
</script>

Answer 2

您可以通过将孩子作为组件注入父母来解决您的问题。并以props为例。