vue全局组件和局部组件,vue全局组件如何通过方法调用
开发前端时，引入组件并在项目中使用是非常常见的。下面文章主要介绍关于Vue的全局提示组件的相关信息，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
全局提示组件在前端是相当重要的，开发业务的时候肯定可以用到。毕竟任何错误都可以通过提示“服务器异常”(手动滑稽)完美抛到后台。
全局提示组件必须在比较流行度的UI组件库中有他的存在。它可能被称为消息、祝酒辞、提醒等。但就是这么一回事。
以ant-design-vue组件库为例。
它的核心代码
message.info(这是一条普通消息)
他以API的方式调用组件，以通常的方式注册组件，然后在template中以不同的方式使用。
实现这个其实并不难。
但在此之前，我想声明一下：ant-design-vue的消息被归为一类，包括info、success、error等。但为了读者方便，我们使用message进行调用，读者可以根据本文提供的演示源代码(粘贴ant-design-vue源代码)进行调整。
首先，我们在components目录下创建message目录，同时创建Message.vue和index.js文件。
然后写在Message.vue里
！-消息. vue -
模板
div{{ content }}/div
/模板
脚本
导出默认值{
名称：“消息”，
道具：{
内容：{
类型：字符串，
默认值：“”
}
}
}
/脚本
而且，把它写在index.js里
//index.js
从“vue”导入{ render，createVNode }
从导入邮件。/Message.vue
导出默认功能消息(内容){
const div=document . createelement( div )
const vm=createVNode(消息，{
内容
})
渲染(虚拟机，分区)
document.body.appendChild(div)
}
最后在app.vue中引入并使用
！- app.vue -
模板
/模板
脚本
从导入邮件。/组件/消息
导出默认值{
setup() {
消息(“消息组件1”)
消息(“消息组件2”)
}
}
/脚本
效果：
Ok，这样就实现了API模式下的调用组件。
它的核心代码实际上只有下面这些
const div=document . createelement( div )
const vm=createVNode(消息，{
内容
})
渲染(虚拟机，分区)
document.body.appendChild(div)
CreateVNode可以认为是H函数，支持直接转换成虚拟dom对象。
然后调用render，在div下渲染，然后将div插入主体。
由于我们做的是全球组件，所以不应该受到任何因素的干扰，比如vue-router。
但是在上面的例子中，我们会发现我们只需要调用一个message方法就可以创建一个div并插入到正文中，这显然不符合vue数据驱动视图的思想。
然后，下一步就是进行改造了。
从Message.vue文件开始。
首先，我们定义一个消息列表消息，然后提供添加和删除删除消息列的两种方法，然后公开add方法。
当然，删除消息需要按id删除，但不能盲目删除。
！-消息. vue -
脚本
从“vue”导入{ ref，unref }
导出默认值{
名称：“消息”，
设置(道具，{ expose }) {
//消息列表
const messages=ref([])
让id=0
//生成id
const uuid=()=`message_${id } `
//添加消息对象
const add=(消息)={
const id=uuid()
const _message={
.消息，
编号
}
unref(消息)。推送(_消息)
const { duration=3 }=消息
//设置计时器
const timer=setTimeout(()={
清除超时(定时器)
移除(id)
}，持续时间* 1000)
}
//根据id删除消息对象
const remove=(id)={
messages.value=unref(messages)。filter(message=message.id！==id)
}
//添加和移除是公开的
暴露({
增加
})
返回{
信息
}
}
}
/脚本
用迭代把消息列表渲染出来，同时使用过渡组做一些列表过渡动画
！-消息。vue -
模板
过渡组
class=message
tag=div
差异
class=消息内容
v-for=消息中的消息
:key=message.id
{{ message.content }}
/div
/过渡-组
/模板
再编写一点消息列表样式和其弹出动画样式
！-消息。vue -
样式范围。消息{
位置：固定；
z指数：999;
top:10px；
左：50%;
transform:平移x(-50%)；
}。消息内容{
填充：8像素16像素
边框半径：3px
方框阴影：0 1px 6px rgba(0，0，0，2);
背景：# fff
边距-底部：20px
}。v-enter-active。-保持活动状态{
过渡：所有200毫秒缓入；
}。v-enter-from。五-离开到{
不透明度：0;
transform:平移y(-30px)；
}
/风格
再改造一下入口文件
之前我们发现在app.vue中调用一次消息方法，就会一次数字正射影像图操作，那我们使用闭包写一个单例模式进行改造
再者我们在Message.vue暴露出增加的方法可以直接进行操作消息列表
//index.js
从“vue”导入{ render，createVNode }
从导入邮件 Message.vue
让虚拟机
//使用单例模式，不再重新插入身体
函数getMessageInstance () {
中频(虚拟机)返回
const div=文档。createelement( div )
vm=createVNode(消息)
渲染（虚拟机，分区)
document.body.appendChild(div)
}
导出默认功能消息（内容= ,持续时间){
getMessageInstance()
vm.component.exposed.add({
内容，
期间
})
}
最后在app.vue文件中随便编写一些测试代码
！- app.vue -
模板
button @click=onClick 测试/按钮
/模板
脚本
从导入邮件。/组件/消息
导出默认值{
setup() {
消息(消息组件1, 4)
消息(消息组件2, 2)
让指数=3
const onClick=()={
消息(`消息消息组件${index } `)
}
返回{
单击事件
}
}
}
/脚本
看看最终效果
好，这就是全局提示组件设计大致思路。
回顾一下会发现，其实某视频剪辑软件的组件开发依旧绕不开JavaScript，可见Java脚本语言在前端的份量。
总结
到此这篇关于某视频剪辑软件全局提示组件的文章就介绍到这了，更多相关某视频剪辑软件全局提示组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。