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 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
JS实现页面打印功能
Mar 16 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
构建一个JavaScript插件系统
Oct 20 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
一个oracle+PHP的查询的例子
2006/10/09 PHP
php中autoload的用法总结
2013/11/08 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
vue中的scope使用详解
2017/10/29 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python实现学生成绩管理系统
2020/04/05 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
shell的种类有哪些
2015/04/15 面试题
新课培训心得体会
2014/09/03 职场文书
暑假打工感想
2015/08/07 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
python 爬取华为应用市场评论
2021/05/29 Python