VUE3.X——父组件调用子组件方法

• 子组件

  

  <!-- 子组件 -->
  <template>
    <!-- teleport 允许我们控制在 DOM 中哪个父节点下呈现 HTML -->
    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div class="wrapper">
          <div class="header">
            <button class="close" @click="toggle">X</button>
            <h3 class="title">登录</h3>
          </div>
            <slot name="content"></slot> 
            <slot name="footer"></slot>
        </div>
      </div>
    </teleport>
  </template>
  

  //子组件
  import { defineComponent, ref } from 'vue';
  export default defineComponent ({
      setup(props,context) {
          let modalOpen:Ref<boolean> = ref(false);
          function toggle() {
              modalOpen.value = !modalOpen.value;
          }
          return { modalOpen, toggle };
      }
  })
  

• 父组件

  <!-- 父组件 -->
  <template>
  	<button @click="toggleModal">登录</button>
  	<modal ref="modal">
          <template v-slot:content>
          	I'm a modal!!
          </template>
          <template v-slot:footer>
              <button class="btn" @click="submit">确定</button>
              <button class="btn" @click="toggleModal">取消</button>
          </template>
      </modal>
  </template>
  

  // 父组件
  import { defineComponent, ref } from 'vue';
  import Modal from '@/components/Modal.vue';
  export default defineComponent ({
      components: {
          Modal
      },
      setup() {
          const modal = ref(); // 变量名要与定义的ref一致，并且必须return出来
          function toggleModal() {
              modal.value.toggle(); // 调用子组件方法
          }
          function submit() {
              ...
              toggleModal();
          }
        return { modal, toggleModal, submit };
      }
  })
  

目录：VUE3.X笔记——目录
上一篇：VUE3.X——获取dom元素