[Vue] 动态组件以及v-once的使用
2019-02-15 00:38
369 查看
PROPS
例子
点击Change按钮,切换child-one和child-two组件。
动态组件
- 实现
1. 创建组件 Vue.component('child-one',{ template: '<div>child-one</div>' }) Vue.component('child-two',{ template: '<div>child-two</div>' }) 2. 使用component标签以及is指令 <component :is="type"></component> 3. 创建按钮以及绑定handleClick事件 <button @click="handleClick">Change component</button> 4. 实现方法 methods: { handleClick: function(){ this.type = this.type === 'child-one' ? 'child-two' : 'child-one'; } }
总结:这种方法简单易读。可以轻松切换组件
v-once指令
1. 创建组件(注意这里使用了v-once组件) Vue.component('child-one',{ template: '<div v-once>child-one</div>', mounted:function(){ console.log('child-one created'); } }) Vue.component('child-two',{ template: '<div v-once>child-two</div>', mounted:function(){ console.log('child-two created'); } }) 2. 使用组件以及创建按钮 <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child-two'"></child-two> <button @click="handleClick">Change component</button> 3. 实现方法 methods: { handleClick: function(){ this.type = this.type === 'child-one' ? 'child-two' : 'child-one'; } }
总结:
- 这种方法实现了和上面一样的功能。
- 这里使用了v-once指令,这种指令可以在DOM创建之后放到内存中,然后下次切换的时候直接从内存中取出,这样可以大大调高效率。
- 通常用于一些静态组件的使用。
相关文章推荐
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
- Vue自定义全局组件以及Vue.use()使用前提
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- vue组件(父子组件传值、非props特性、作用域插槽、动态组件、v-once)
- VUE入门到实战--Vue非父子组件传值、插槽、动态组件和v-once
- 使用form-create动态生成vue自定义组件和嵌套表单组件
- vue中动态组件的使用
- 使用Vue开发动态刷新Echarts组件的教程详解
- vue2.0使用动态组件实现tab切换效果(vue-cli)
- 深入理解Vue组件八——动态组件与v-once指令
- 详解Vue组件插槽的使用以及调用组件内的方法
- Vue--动态组件与v-once指令
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- Vue 单页内使用router-link跳转,动态使用router.push()实现页内跳转,跳转到其他组件
- Vue 使用Props属性实现父子组件的动态传值
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)