Vue 动态组件components和v-once指令的实现
更新时间：2019年08月30日 08:21:15 作者：ALLen、LAS
这篇文章主要介绍了Vue 动态组件components和v-once指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、实现两个组件间互相展示、互相隐藏
<!DOCTYPE html>
<html>
<head>
<title>动态组件</title>
<script type="text/javascript" src="./vue-dev.js"></script>
</head>
<body>
<div id="app">
<child-one v-if="type=='child-one'" content="child-one"></child-one>
<child-two v-if="type=='child-two'" content="child-two"></child-two>
<button @click="handleChangeEvent">change</button>
</div>
<script type="text/javascript">
Vue.component('child-one', {
props: ["content"],
template: `<div>{{content}}</div>`,
});
Vue.component('child-two', {
props: ["content"],
template: `<div>{{content}}</div>`,
})
var vm = new Vue({
el: '#app',
data(){
return{
type:'child-one'
}
},
methods:{
handleChangeEvent:function(){
this.type= this.type=="child-one" ? 'child-two':'child-one';
}
}
})
</script>
</body>
</html>
页面效果图如下：
二、动态组件，简化页面代码
使用：父组件 dom标签使用 ，对组件名称进行绑定
<div id="app">
<!-- <child-one v-if="type=='child-one'" content="child-one"></child-one>
<child-two v-if="type=='child-two'" content="child-two"></child-two> -->
<!--动态组件标签component 利用is接收指定标签组件-->
<component :is="type" :content="type"></component>
<button @click="handleChangeEvent">change</button>
</div>
无论使用v-if还是components来使用动态组件的实现，都是在点击交互后，每一次页面效果的切换，会自动销毁前一个组件，再重新创建一个组件，页面则显示响应的内容， 这样的实现方式是比较消耗性能的
三、 v-show和v-once
使用v-show,则会只是隐藏在dom元素中，组件都会被创建。
在子组件中，加入v-once，当每次切换组件效果时，不再需要每次都经过创建-销毁的过程，而是在内存中直接取用上一次使用过的组件的内容
Vue.component('child-one',{
template:'<div v-once>child-one</div>'
})
Vue.component('child-two',{
template:'<div v-once>child-two</div>'
})
使用v-once,可以有效提高静态内容的展示效率，提高性能
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,这篇文章主要给大家介绍了关于vue中刷新子组件重新加载子组件三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了vue封装一个日历组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了在 Vue 中控制表单输入方法详解的相关资料,需要的朋友可以参考下2023-04-04
vue中v-for和v-if不能在同一个标签使用的最新解决方案
这篇文章主要介绍了vue中v-for和v-if不能在同一个标签的最新解决方案,这里描述了两种解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了Vue3是如何实现加载动态菜单功能的，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下2022-07-07
今天小编就为大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue+vite创建项目关于vite.config.js文件的配置方法
Vue项目创建时，我们见过vue-cli 创建项目和webpack 创建项目等方式，这篇文章主要介绍了Vue+vite创建项目关于vite.config.js文件的配置方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue中对监听esc事件和退出全屏问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
element表单el-form的label自适应宽度的实现
本文主要介绍了element表单el-form的label自适应宽度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue 框架下自定义滚动条(easyscroll)实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论