Vue中页面交互

组件

组件的概念类似于es5、es6中module。目的在于把一些常用的、定制化的、公共的代码封装起来,达到功能抽离、业务抽离的效果。

既然是封装,那么势必会有数据的交互。vue使用props做数据流入,使用$emit暴露方法做数据流出。
Vue组件

下面是一个简单的notData组件例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
<div class="not-data-wrapper">
<div class="not-data-main" @click="handleClick">
<img :src="notDataImg"/>
<p v-html="tipCopy"></p>
</div>
</div>
</template>

<script>
import notDataImg from './not-data.png'

const tips = [
'喔噢,没找到数据',
'没有数据~'
]
export default {
props: [
'tip'
],
data () {
return {
notDataImg
}
},
computed: {
tipCopy () {
return this.tip || tips[Math.floor(Math.random() * tips.length)]
}
},
methods: {
handleClick () {
this.$emit('handleClick')
}
}
}
</script>

<style lang="stylus" scoped>
.not-data-wrapper
width 100%
height 100%
text-align center
font-size 16px
padding-top 120px
.not-data-main
display inline-block
text-align center
img
width 90px
p
color #999
</style>

在父级组件中调用

1
<not-data v-show="showNotData" :tip="tip" @handleClick="refresh"></not-data>

路由

这里只说明一些使用经验。文档请移步。vue-router

路由的三种携带数据的方式:params、query、meta。

  1. params: 动态路由匹配携带的参数。例如:’/user/:id’,在路由的页面可通过this.$route.params获取。页面中的用户信息通过id来获取的,那么id必传不可,所有在vue-router的设计当中,这个必须匹配。params常常是必传的参数,对整个页面的影响起这决定性的作用。

  2. query: 路由?后面的参数。例如:’/user/123?name=张三&age=18’,路由页面可通过this.$route.query.name、this.$route.query.age获取,可能是为了减少网络请求,也可能是为了携带查询条件的参数。query携带的参数一般都是起辅助性的作用,因为它可有可无,在代码中有使用的地方,必须有默认值或者为空判断

  3. meta: 我想vue作者的设计初衷是为了添加页面meta的属性,比如说title、desc等,方便做SEO。当然也可以携带其他意义的值,比如说在Vue 2.0的早期版本中,部分组件做keep-alive,很多人就是用meta属性来携带是否缓存的值,来决定是否keep-alive。

配置router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})

使用$route.meta的keepAlive属性:

1
2
3
4
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

Vuex

Vuex,vue全局状态管理器。

数据本地化 localStorage

坚持原创技术分享,您的支持将鼓励我继续创作!