Vue引入组件,Vue自定义组件
这篇文章主要为大家介绍了某视频剪辑软件新增内置组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
目录
一、瞬移1.1瞬移介绍1.2 使用瞬间移动1.3预览效果二、暂停2.1介绍暂停2.2使用暂停2.3预览效果总结
一、Teleport
传送官方文档
1.1 Teleport 介绍
1.某视频剪辑软件鼓励我们通过将用户界面和相关行为封装到组件中来构建我们的用户界面。我们可以将它们相互嵌套以构建构成应用程序用户界面的树。
2.但是，有时组件模板的一部分在逻辑上属于该组件，而从技术角度来看，最好将模板的这部分移动到数字正射影像图中的其他位置，即某视频剪辑软件应用程序之外。
上面的话是不是看起来很懵逼，其实是翻译自官方文档
其实我理解的传送就是将一个组件挂载在某视频剪辑软件应用程序之外，我们知道，Vue属于水疗中心（单页面)应用。所有的渲染都在编号为应用的标签里面，这样的话，我们就创建一个和应用是同级的组件，并且通过心灵运输标签引用，就可以任意页面使用了
1.2 使用 Teleport
1.我们这里也是实现一个全局模态框
2.通过父子组件通信机制，来使用心灵运输的挂载的特性
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
link rel= icon href=/favicon。ico /
meta name= viewport content= width=device-width，initial-scale=1.0 /
标题邀请应用程序/标题
/头
身体
div id=app/div
div id=modal/div！-定义一个和应用同级的标签模态-
脚本类型=模块src=/src/main.ts/script
/body
/html
定义一个情态的组件
模板
！-传送有个一个到属性，挂载在编号为情态的的标签上-
传送到=#modal
div id=center v-if=isOpen
div class= modal-header v-if= title
h2{{ title }}/h2
人力资源/
/div
“模态内容”
！-我们使用插槽，来支持外部插入内容-
插槽/插槽
/div
button @click=buttonClick 关闭/按钮
/div
/瞬间移动
/模板
脚本语言
//定义道具{ msg:string }()vue 3设置定义小道具
从“vue”导入{定义组件}；
导出默认定义组件({
道具：{
isOpen:布尔型，
标题：字符串
},
//验证
发出：{
“封闭模态”:空
//(有效负载：任何)={
//返回有效负载type===close
//}
},
设置（道具、上下文){
常量按钮点击=()={
context.emit("关闭模式");
}
返回{
按钮点击
}
}
});
/脚本
风格
#中心{
宽度：200像素
高度：200像素
边框：2px纯黑；
背景色：白色；
位置：固定；
左：50%;
top:50%；
transform: translate(-50%，-50%)；
}
/风格
3.使用情态的组件
脚本安装语言=ts
从“vue”导入{ ref }；
从导入模式/组件/模态。vue ；
const modalTitle=ref(你好，世界);
const modalissopen=ref(false)；
const openModal=()={
modalIsOpen.value=true
}
const onModalClose=()={
modalIsOpen.value=false
}
/脚本
模板
img alt=Vue logo src= ./assets/logo.png /
div class=test-useURLLoader
button @ click=打开模式模式/button
modal:title= modal title :iso pen= modalis open @ close-modal= onModalClose
我的模态
/Modal
/div
/模板
风格
#app {
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
1.3 预览效果
二、Suspense
焦虑官方文档
Waring:作为Vue3中的实验功能，可以随时修改，所以对于生成环境的应用不推荐使用。
2.1 介绍 Suspense
它可以用于异步数据，它有一个本地处理方法来适应各种情况，并提供了一个替代方案(加载完成和失败的槽)。
更多的细节，你可以自己去查阅官方文件，我只是部分选取。
2.2 使用 Suspense
1.为了达到异步的效果，可以用Promise来实现异步操作。
2.我们定义了以下组件：AsyncShow.vue组件
模板
！-等待3秒钟以显示数据-
h1{{ result }}/h1
/模板
脚本语言
从“vue”导入{ define component }；
导出默认定义组件({
setup() {
返回新承诺((解决)={
setTimeout(()={
返回解析({
结果：43
})
}, 3000);
});
}
});
/脚本
风格
/风格
3.在App.vue中使用此组件
脚本安装语言=ts
从“”导入AsyncShow。/components/async show . vue ；
/脚本
模板
img alt=Vue logo src=。/assets/logo.png /
div class=test-useURLLoader
！-当承诺没有执行时，它将显示加载.执行后，它将显示值-
焦虑
模板#默认
异步显示/
/模板
模板#回退
氘
装货.
/h2
/模板
/悬念
/div
/模板
风格
#app {
字体系列：Avenir，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
2.3 预览效果
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。