Vue两种组件类型:递归组件和动态组件的用法


Posted in Javascript onAugust 06, 2020

一递归组件

递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。

// 递归组件 recursive.vue
<template>
 <div>
 <p>递归组件</p>
 <Recursion :count="count + 1" v-if="count < 3"></Recursion>
 </div>
</template>

<script>
 export default {
 name: "Recursion",//必须设置name属性
 props: {
  count: {
  type: Number,
  default: 1
  }
 }
 }
</script>

这个例子中父页面使用该递归组件会调用三次recursive组件,值得注意的是递归组件必须设置递归次数限制数量

否则会抛出错误,该例子中通过count来限制递归次数。

二 动态组件

如果将一个Vue组件命名为Component会报错,因为Vue提供来特殊的元素<component>来动态挂载不同组件。

并使用is特性来选择要挂载的组件。

// parentComponent.vue
<template>
 <div>
 <h1>父组件</h1>
 <component :is="currentView"></component>
 <button @click = "changeToViewB">切换到B视图</button>
 </div>
</template>

<script>
 import ComponentA from '@/components/ComponentA'
 import ComponentB from '@/components/ComponentB'
 export default {
 components: {
  ComponentA,
  ComponentB
 },
 data() {
  return {
  currentView: ComponentA // 默认显示组件 A
  }
 },
 methods: {
  changeToViewB () {
  this.currentView = ComponentB // 切换到组件 B
  }
 }
 }
</script>

通过改变currentView的值就可以动态切换显示的组件,与之类似的是vue-router的实现原理,前端路由到不同的页面实际上就是加载不同的组件。

补充知识:Vue route部分简单高级用法

一、改变页面title的值

在开发时常常需要在切换到不同页面时改变浏览器的title值,那么我们就可以在定义路由的时候通过配置 meta 属性

来改变title值。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import UserInfo from ".././userInfo.vue";
import ChangeCommunity from ".././ChangeCommunity.vue";

var vueRouter= new Router({
routes: [
 {
 path: '/',
 name: 'UserInfo',
  component: UserInfo,
  meta: {
   title: '我的信息'
  }
  },
  {
   path: '/ChangeCommunity',
   name: 'ChangeCommunity',
   component: ChangeCommunity,
   meta: {
   title: '我的社区'
   }
  },
 
]
})
vueRouter.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
})
export default vueRouter

当从我的信息页面跳转到我的社区页面时,对应的title值也会由“我的信息”变成“我的社区”。

二、路由懒加载

当项目页面比较多时,初始化时候加载所有页面路由,性能十分差,这时候就可用懒加载,要渲染那个页面就加载那个页面。

例如:

{
   path: '/ChangeCommunity',
   name: 'ChangeCommunity',
   component: ChangeCommunity,
   resolve
 },

还可以

{
   path: '/ChangeCommunity',
   name: 'ChangeCommunity',
   component: resolve=>require(['ChangeCommunity'],resolve)
 },

两种写法都可以。

三 、滚动行为

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。

vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意:这个功能只在支持 history.pushState 的浏览器中可用。

例如:

 const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {

  if (savedPosition) {
  return savedPosition//滚动到指定位置
 
 } else {
 
return { x: 0, y: 0 }
 
 }
 } })
“滚动到锚点”的行为:
scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
 return {
  selector: to.hash
 }
 }
}
异步滚动
scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
  resolve({ x: 0, y: 0 })
 }, 500)
 })
}

以上这篇Vue两种组件类型:递归组件和动态组件的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断window.onload是否多次使用的方法
Sep 21 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
JS实现的DOM插入节点操作示例
Apr 04 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 #Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 #Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 #Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 #Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 #Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 #Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
str_replace只替换一次字符串的方法
2013/04/09 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
python中sets模块的用法实例
2014/09/30 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
pycharm新建一个python工程步骤
2019/07/16 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python加载自定义词典实例
2019/12/06 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
PHP面试题大全
2015/10/16 面试题
会计毕业生自荐信
2013/11/21 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
教师简历自我评价
2014/02/03 职场文书
美术毕业生求职信
2014/02/25 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
公务员考察材料范文
2014/12/23 职场文书
销售员自我评价
2015/03/11 职场文书
民主生活会意见
2015/06/05 职场文书
网络营销实训总结
2015/08/03 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
SQL Server Agent 服务无法启动
2022/04/20 SQL Server