vue的异步组件,vue实现动态组件
这篇文章主要介绍了深入了解某视频剪辑软件动态组件和异步组件的相关资料，帮助大家更好的理解和学习某视频剪辑软件组件的相关知识，感兴趣的朋友可以了解下
1.动态组件
！声明文档类型
超文本标记语言
头
meta charset=utf-8
风格
#app {
字体大小：0
}。动态组件演示选项卡按钮{
填充：6像素10像素
border-top-left-radius:3px；
border-top-right-radius:3px；
边框：1px纯色# ccc
光标：指针；
边距-底部：-1px；
右边距：-1px；
背景：# f0f0f0
}。动态组件演示选项卡按钮。动态组件演示活动{
背景：# e0e0e0
}。动态组件演示选项卡按钮：悬停{
背景：# e0e0e0
}。动态-组件-演示-帖子-选项卡{
显示器：flex
}。动态组件演示选项卡{
字体大小：1雷姆；
边框：1px纯色# ccc
填充：10px
}。动态-组件-演示-帖子-侧栏{
最大宽度：40vw
保证金：0!重要；
填充：0 10px 0 0！重要；
列表样式类型：无；
右边框：1px实心# ccc
行高：1.6厘米；
}。动态-组件-演示-帖子-侧栏李{
空白：nowrap
文本溢出：省略号；
溢出：隐藏；
光标：指针；
}。动态组件演示活动{
背景：浅蓝色；
}。动态组件演示后期容器{
左填充：10px
}。动态组件演示发布：第一个孩子{
边距-顶部：0!重要；
填充顶部：0!重要；
}
/风格
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
/头
身体
div id=应用程序
按钮选项卡中的v-for=选项卡 class=动态组件-演示-选项卡-按钮
v-bind:class= { dynamic-component-demo-active :tab===current tab }
@ click= current tab=tab“{ tab } }/button
点火电极
组件v-bind:is= currentTabComponent /component
/保持活力
/div
脚本
vue。组件( tab-post ，{
数据：函数(){
返回{
帖子：[
{id: 1，标题：猫Ipsum ，内容：继续等待风暴过去，},
{id: 2，标题："潮人Ipsum”，内容："布什维克蓝瓶scenester . "},
{id: 3，标题："纸杯蛋糕Ipsum”，内容："糖霜甜点蛋奶酥."},
],
selectedPost: null
}
},
模板：` div class= dynamic-component-demo-posts-tab dynamic-component-demo-tab
ul class=动态组件演示帖子侧栏
李
v-bind:key=post.id
v-on:click=selectedPost=post
v-bind:class= { dynamic-component-demo-active :post===selected post }
{{ post.title }}
/李
/ul
div class=动态组件演示后期容器
div v-if=所选帖子 class=动态组件-演示帖子
h3{{ selectedPost.title }}/h3
div v-html=选定的职位。内容/div
/div
强v-否则
点击左边的博客标题查看。
/strong
/div
/div ` 1
});
Vue.component(tab-archive ，{
模板： div class= dynamic-component-demo-tab 存档组件/div
});
新Vue({
埃尔： #app ，
数据：{
当前标签:"文章",
标签:[文章,存档]
},
计算值：{
当前ABC组件：函数(){
返回tab-这个。当前选项卡。到小写()
}
}
});
/脚本
/body
/html
在动态组件上使用保持活力，可以在组件切换时保持组件的状态，避免了重复渲染的性能问题。
2.异步组件
某视频剪辑软件允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。
Vue.component(async-example ，function (resolve，reject) {})
这里可以回顾一下Vue.js —组件基础。
我们使用通过工具打包的某视频剪辑软件项目来介绍异步组件。
！- HelloWorld.vue -
模板
差异
H2 class= title“{ msg } }/H2
/div
/模板
脚本
导出默认值{
data () {
返回{
消息："你好Vue！”
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围。标题{
填充：5px
颜色：白色；
背景：灰色；
}
/风格
！- App.vue -
模板
div id=应用程序
HelloWorld/
/div
/模板
脚本
从导入你好世界./components/HelloWorld
导出默认值{
名称："应用程序",
组件：{
编译
}
}
/脚本
风格
/风格
让我们将App.vue的脚本标签中的内容改为：
导出默认值{
名称：“应用程序”，
组件：{
HelloWorld: ()=import(。/components/hello world’)
}
}
这样就实现了App组件异步加载HelloWorld组件的功能。
我们可以按需加载。
！- App.vue -
模板
div id=应用程序
button @click=show=true 加载工具提示/按钮
div v-if=show
HelloWorld/
/div
/div
/模板
脚本
导出默认值{
数据：()=({
显示：假
}),
组件：{
HelloWorld: ()=import(。/components/hello world’)
}
}
/脚本
风格
/风格
这里的异步组件工厂函数也可以返回以下格式的对象：
const AsyncComponent=()=({
//需要加载的组件(应该是Promise对象)
组件：导入(。/my component . vue’)，
//加载异步组件时使用的组件
加载：加载组件，
//加载失败时要使用的组件
错误：错误组件，
//显示组件加载时的延迟时间。默认值为200(毫秒)。
延时：200，
//如果提供了超时，并且组件加载也超时，
//然后使用加载失败时使用的组件。默认值为：无穷大。
超时：3000
})
参考：
动态组件异步组件-vue.js
也就是彻底了解Vue动态组件和异步组件的细节。更多关于Vue动态组件和异步组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。