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

  • 子组件

    sCHZvR.png

    <!-- 子组件 -->
    <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元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值