我的编程空间,编程开发者的网络收藏夹
学习永远不晚

详解Vue新增内置组件的使用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

详解Vue新增内置组件的使用

一、Teleport

Teleport 官方文档

1.1 Teleport 介绍

1.Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建我们的 UI。我们可以将它们相互嵌套以构建构成应用程序 UI 的树。

2.但是,有时组件模板的一部分在逻辑上属于该组件,而从技术角度来看,最好将模板的这部分移动到 DOM 中的其他位置,即 Vue 应用程序之外。

上面的话是不是看起来很懵逼,其实是翻译自 官方文档

其实我理解的 Teleport 就是将一个组件挂载在 Vue app 之外,我们知道,Vue 属于 SPA(单页面)应用。所有的渲染都在 id 为 app 的标签里面,这样的话,我们就创建一个和 app 是同级 的组件,并且通过 teleport 标签引用,就可以任意页面使用了

1.2 使用 Teleport

1.我们这里也是实现一个全局模态框

2.通过 父子组件通信 机制,来使用 teleport 的挂载的特性


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="modal"></div> <!-- 定义一个和 app 同级的标签 modal -->
    <script type="module" class="lazy" data-src="/class="lazy" data-src/main.ts"></script>
  </body>
</html>

定义一个 Modal 组件


<template>
	<!-- teleport 有个一个 to 属性,挂载在 id为modal的标签上 -->
    <teleport to="#modal">
        <div id="center" v-if="isOpen">
            <div class="modal-header" v-if="title">
                <h2>{{ title }}</h2>
                <hr />
            </div>
            <div class="modal-content">
                <!-- 我们使用插槽,来支持外部插入内容 -->
                <slot></slot>
            </div>
            <button @click="buttonClick">Close</button>
        </div>
    </teleport>
</template>
<script lang="ts">
// defineProps<{ msg: string }>() Vue3 setup 定义 props
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        isOpen: Boolean,
        title: String
    },
    // 验证
    emits: {
        'close-modal': null
        // (payload: any) => {
        //     return payload.type === 'close'
        // }
    },
    setup(props, context) {
        const buttonClick = () => {
            context.emit('close-modal');
        }
        return {
            buttonClick
        }
    }
});
</script>
<style>
#center {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    background-color: white;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>

3.使用 Modal 组件


<script setup lang="ts">
import { ref } from 'vue';
import Modal from './components/Modal.vue';
const modalTitle = ref('你好,世界');
const modalIsOpen = ref(false);
const openModal = () => {
  modalIsOpen.value = true;
}
const onModalClose = () => {
  modalIsOpen.value = false;
}
</script>
<template>
  <img alt="Vue logo" class="lazy" data-src="./assets/logo.png" />
  <div class="test-useURLLoader">
    <button @click="openModal">modal</button>
    <Modal :title="modalTitle" :isOpen="modalIsOpen" @close-modal="onModalClose">
      My modal
    </Modal>
  </div>
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1.3 预览效果

请添加图片描述

二、Suspense

Suspense 官方文档

Waring:作为 Vue3 中实验性的功能,随时都有可能修改,所以不建议用于生成环境的应用

2.1 介绍 Suspense

是可以用来异步数据,它拥有一个本地的处理方法用来适配多种情形提供了二选一(加载完成 和 失败的插槽)

更详细的内容大家可以自行翻阅官方文档,我只是进行一部分的挑选

2.2 使用 Suspense

1.为了实现异步效果,我们可以使用 Promise 来实现异步操作。

2.我们定义如下组件 AsyncShow.vue 组件


<template>
	<!-- 等待3秒显示数据 -->
    <h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    setup() {
        return new Promise((resolve) => {
            setTimeout(() => {
                return resolve({
                    result: 43
                })
            }, 3000);
        });
    }
});
</script>
<style>
</style>

3.在 App.vue 里面使用该组件


<script setup lang="ts">
import AsyncShow from './components/AsyncShow.vue';
</script>
<template>
  <img alt="Vue logo" class="lazy" data-src="./assets/logo.png" />
  <div class="test-useURLLoader">
    <!-- Promise 未执行完成时,就会显示 Loding... 执行完毕后,就会显示数值 -->
    <Suspense>
      <template #default>
        <AsyncShow />
      </template>
      <template #fallback>
        <h2>
          Loading...
        </h2>
      </template>
    </Suspense>
  </div>
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.3 预览效果

请添加图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

详解Vue新增内置组件的使用

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue 内置组件 component 的用法示例详解

这篇文章主要介绍了vue内置组件component的用法,本文给大家介绍了component内置组件切换方法,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-11-13

vue内置组件怎么使用

这篇文章主要介绍了vue内置组件怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue内置组件怎么使用文章都会有所收获,下面我们一起来看看吧。vue组件有:1、component,用于渲染一个“元组件”为
2023-07-04

vue内置组件keep-alive怎么使用

这篇文章主要讲解了“vue内置组件keep-alive怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue内置组件keep-alive怎么使用”吧!一、Keep-alive 是什么k
2023-07-04

Vue提示框组件vue-notification使用详解

这篇文章主要介绍了Vue提示框组件vue-notification使用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-03-20

vue组件component的注册与使用详解

组件是Vue是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签,这篇文章主要介绍了vue组件component的注册与使用,需要的朋友可以参考下
2022-11-13

详细解读VUE父子组件的使用

这篇文章主要介绍了详细解读VUE父子组件的使用,今天来讲一种子父组件深度耦合的方式,使我们不用额外的创建新的组件,也可以达到一些效果,下面与你们分享一下
2023-05-19

聊聊对vue内置组件keep-alive的理解

Keep-alive 是什么?下面本篇文章带大家聊聊对vue内置组件keep-alive的理解,希望对大家有所帮助!
2023-05-14

编程热搜

目录