vue组件函数调用--弹窗组件

除了用自定义组件双向绑定的方法完成弹框的显示和隐藏外，我们还可以把 visible 直接写在子组件中，通过在父组件里调用子组件方法的形式，修改子组件中的 visible 的值，完成弹框的显示和隐藏。

想要调用子组件中的方法，其实就是访问子组件实例，调用实例中的方法。

可以利用 Vue 提供的 ref 属性来访问子组件实例，并调用子组件中的方法。

改写子组件 Modal.vue

首先需要修改一下子组件 Modal.vue 的写法：

javascript
<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      这是个弹框
      <div class="footer">
        <button @click="close">close</button>
        <button @click="confirm">confirm</button>
      </div>
    </div>
  </div>
</template>

<script