从子组件VueJs添加元素的打开模式

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 为例。