vue
的自定义组件
被vue
所管理的标签可以认为是vue
的组件。 而在项目开发的过程中,经常会用到一些需要复用的标签结构以及相应样式。vue
提供了自定义组件的写法,可以让开发者将一些需要复用的页面结构、样式、功能组织在一起,作为一个整体存在在项目中。这样,当需要使用这个组件时,直接引用该组件即可,例如:
<div>
<!-- 该组件就称为一个自定义组件,由开发者自行设计
标签名自定义,属性自定义,事件自定义 -->
<person src="图片路径" name="昵称"></person>
</div>
如何设计并实现一个自定义组件
目标,设计一个组件,模仿标签的样式,方便的进行使用。
实现步骤:
-
设计一个自定义组件(包括它的外观、功能、未来怎么复用)。
-
定义一个组件:
- 在components目录下新建
MyTag.vue
。并且在该组件中定义基础样式。 - 注意:
<script>export default {}</script>
- 在components目录下新建
-
当需要使用该组件时,需要先引入再使用:
-
引用
MyTag
组件:import MyTag from './components/MyTag.vue' components: { // 组件名:组件对象 // 组件名相当于标签名,在页面中可以直接使用 // vue为了使用方便,自动支持将驼峰命名法 改为 短横线命名法 // <MyTag></MyTag> 大驼峰 // <my-tag></my-tag> 短横线 MyTag: MyTag, mytag: MyTag, abc: MyTag }
-
直接通过标签名,使用该组件:
<MyTag></MyTag> <my-tag></my-tag> // 直接看到自定义组件的外观 <MyTag /> <mytag></mytag> <abc></abc>
-
如何向子组件传参,修改子组件的内容
实现步骤
-
在子组件中的
script
代码段中,通过props
定义自定义属性,接收父组件传进来的参数。export default { props: { 自定义属性名: { default: 属性的默认值, type: 属性的数据类型, required: 属性是否为必填属性, validate: 通过正则验证属性值的格式 }, avatar: { type: String, default: '' } } }
在此,
vue
提供了一种简单语法来定义属性:export default { props: ['color', 'avatar', 'name'] }
组件插槽
平时在设计子组件时,绝大部分布局内容都已完成定义,但是有些布局需要父组件在使用当前子组件时动态设置,这时就可以使用组件插槽。在设计子组件时,可以在布局中定义插槽位置及基础样式,父组件在使用时通过slot
来动态赋值。
默认插槽
-
在设计子组件时,在组件某一个位置添加slot标签(在此处安放一个插槽):
<template> <div class="my-tag"> <slot /> <!-- 在此处安放一个插槽 --> </div> </template>
-
在父组件中使用子组件时,需要动态设置子组件的默认插槽内容:
子组件开始标签与结束标签中的内容,将会作为默认插槽,替换子组件的
slot
:<my-tag>标签文本</my-tag> <my-tag> <span>另外一个文本</span> </my-tag>
具名插槽
如果在子组件中,有多个地方都需要在父组件引用时动态设置内容,则可以声明多个插槽,每一个插槽赋予一个名字,称为具名插槽。 在使用该子组件并且为插槽设置内容时,可以使用<slot name='名称'></slot>
来动态赋值。
案例:模仿后台管理页面的布局。
实现步骤:
-
当设计一个子组件时,子组件中有多个地方都需要插槽来动态赋值时,就可以为
slot
标签添加name
属性(起一个名字):<div> <slot name="header"/> <slot name="left"/> <slot name="right"/> </div>
-
当使用该组件时,通过
slot
属性来指定为哪一个插槽设置内容:<Layout> <span slot="header">header的内容</span> <span slot="left">left的内容</span> <span slot="right">right的内容</span> </Layout>
VueCli
脚手架中的路由系统 VueRouter
多页项目的开发:一个大型网站需要由多个页面共同组成,页面之间可以相互跳转。
开发方式分为两种:
-
传统方案:每一个页面都是一个独立的
html
文件,通过超链接标签a
来实现页面之间的跳转。特点:先清空之前的页面内容,然后显示新页面 – 浏览器会闪一下
-
新方案:通过
Ajax
实现局部页面更新。特点:不需要切换
html
页面(浏览器不会重新加载新的dom
树),只需要将局部内容更新即可。
VueCli
脚手架创建的项目属于新方案,
专业一点称为:SPA(Single Page Application)
项目。 单页面应用。意味着VueCli
脚手架项目无论设计多少个页面,本质上只有一个html
。所有的页面内容显示、跳转都将会在这唯一的一个index.html
页面中完成。 (public/index.html
)
对于单页面应用来说,多个界面之间的跳转本质上就是div #app
中内容的动态更新。
脚手架中路由系统相关的文件:
public/index.html
项目中唯一的html
网页,提供div#app
。src/main.js
入口js
文件,将会创建Vue
对象,管理div#app
。src/App.vue
页面初始化加载的组件src/views/HomeView.vue
页面组件src/router/index.js
定义了 请求资源路径与组件之间的映射关系。
如何为一个页面组件配置路由地址?(访问该地址,可以看到该页面)
-
前提:
App.vue
中添加<router-view />
<template> <div> <!-- 占位符,router-view在页面中具体显示什么组件效果, 由当前请求资源路径来决定 若浏览器访问: http://localhost:8080/ 看到 HomeView.vue 若浏览器访问: http://localhost:8080/about 看到AboutView.vue --> <router-view /> </div> </template>
-
前去配置路由地址与组件之间的映射关系:
src/router/index.js
import HomeView from 'HomeView.vue的路径' const routes = [{ path: '/', name: '路由名称-需要避免重复', component: HomeView }]
案例:配置路由,实现:
访问:http://localhost:8080/slot 看到:src/App-默认插槽.vue
访问:http://localhost:8080/nameslot 看到:src/App-具名插槽.vue
路由配置中的懒加载与非懒加载的差异
在router/index.js
中配置路由时,可以选择标准模式与懒加载模式配置路由:
标准模式:
import SlotView from '../App-默认插槽.vue'
const routes = [
{
path: '/slot',
name: 'slot',
component: SlotView
},
]
对于标准模式加载组件,在import
的时候已经将组件加载到内存中。这样的话,当Vue
项目初始化时,就会加载路由系统,从而引入该组件。(虽然还不需要看到这个组件,但是已经下载完毕,在内存中已经存在)
懒加载模式:
const routes = [
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
对于懒加载模式,使用函数的方式引入该组件,这种引入方式将会在使用的时候才会下载资源,真正做到,随用随下载。
结论
除了首页必须加载的资源使用标准模式之外,其他都可以无脑使用懒加载。
脚手架路由运行流程
基于路由系统完成页面跳转功能
基于组件方式,实现路由跳转:
<router-link to="目标地址">链接文本</router-link>
<router-link to="/about">点击去往about</router-link>
编程式跳转:
this.$router.push('目标地址')
this.$router
是什么?
当前项目中的路由管理器(VueRouter
对象),管理了所有的路由对象。除此之外,还提供了很多方法,进行路由操作:
this.$router.push('/about') 跳转到 /about
this.$router.go(-1) 回到上一页
this.$router.push()
跳转的过程中,有可能出现如下错误:
上述错误的原因:当前页面已经是/nameslot
页面了,结果在跳转的过程中还要跳转到该路由地址:/nameslot
,导致路由重复跳转的问题。在此可以添加一个if判断:如果当前路由地址已经是/nameslot
,那么就不再向该地址跳转了。