可以从 vue 组件外部打开模态

Question

是否可以从组件外部调用方法使组件可重用？

现在，我添加按钮以在模板槽中打开模式：

index.php

 <modal>
    <template slot="button">
        <button class="btn">Open modal</button>
    </template>
    Some modal text
</modal>

Modal.vue

 <template>
    <div>
        <div @click="showModal"><slot name="button"></slot></div>
        <div v-if="showingModal"><slot></slot></div>
    </div>
</template>

<script>
    export default {

        data () {
            return {
                showingModal: false,
            }
        },

        methods: {
            showModal() {
                this.showingModal = true;
            },
        }
    }
</script>

我觉得有更好的选择，但我无法弄清楚。

原文由 twoam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，您可以从组件外部调用方法！

父组件

<template>
 <div>
   <modal ref="modal"></modal>
   <button @click="openModal">Open Modal</button>
 </div>
</template>

<script>
  import modal from './child.vue'
  export default {
    components: { modal }
    methods: {
     openModal() { this.$refs.modal.show() }//executing the show method of child
    }
  }
</script>

子组件

<template>
  <div v-if="showModal">
    <div id="modal">
      <p>Hello i am a modal
      </p>
      <button @click="hide">Close</button>
    </div>
  </div>
</template>

<script>
 export default {
   data() {
     return {
      showModal: false
     }
   },
   methods: {
     show() {
      this.showModal = true
     },
     hide(){
      this.showModal = false
     }
   }
 }
</script>

在这里看到它的实际效果

原文由 Roland 发布，翻译遵循 CC BY-SA 3.0 许可协议