Vue中页面交互

组件

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

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

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

<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>

在父级组件中调用

<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

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属性：

<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