vue从创建到完整的饿了么（11）组件的使用（svg图标及watch的简单使用）

说明

1.上一章--city.vue的完善（v-if的使用及本地缓存的存储与使用）
2.苍渡大神的源码地址--项目源码地址
3.UI框架--Mint UI
4.数据接口地址--接口API
5.下一章--miste.vue

开始

1.创建
在src下的page文件夹下创建 miste 文件夹，在其中创建 miste.vue文件，代码如下

2.路由
在src下的router文件下的routers.js添加miste.vue的路由

3.UI
先看一下UI图

大家可以分析一下，首先脚部的4个导航肯定是在多个页面都要用的，其次是头部，但是我发现不同的页面头部是不一样的，而且点击事件也不一样。所以，咱们就先做脚部的四个导航。

4.创建页面。
咱们先把脚部的 搜索，订单，我的 这几个页面创建，并添加路由。

5.创建组件
在src下新建文件夹components，所有的组件都写在这里。在components文件下新建文件夹foot，在这里写脚部的组件，代码如下

6.引入组件
在miste.vue里要是用foot.vue，首先要引入组件，与引入Mint ui组件一样，在script里第一行首先引入

import foot from '../../components/foot/foot'

其次，在components里注册组件

components:{
  //注册组件
    foot
  },

这里要注意，注册组件是components，我以前一直写的是component，得，都得改。

最后使用，直接在页面的template里加上

 <foot></foot>

页面完整代码如下

查看页面效果

ok！引入脚部组件成功，下面就是写foot.vue 的样式

7.foot.vue样式。
7.1tabbar
在Mint ui 中有一个tabbar组件，与咱们需求相似，在foot.vue使用

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <img slot="icon">
            外卖 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <img slot="icon">
            订单
          </mt-tab-item>
          <mt-tab-item id="search">
            <img slot="icon" src="">
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <img slot="icon">
            我的
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

这里v-model绑定的$store.state.selected是当前选中mt-tab-item的id，所以我把ID改成了要跳转页面的名字，在vuex中声明变量selected，打开src下的store下的index.js修改如下

让selected有一个值是让组件有一个默认值。页面如下

7.2 svg图标
vue怎么用svg--点击这里，很简单，就三行代码，咱们直接用。
首先在iconfont下载咱们需要用的svg素材，放到src/svg文件下

使用时直接用icon即可，name等于要引用的svg的文件名字

<icon name="miste"></icon>

因为是在Mintui 的tabbar组件里使用，所以还要加上 slot="icon"，代码修改如下

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <icon slot="icon" name="miste"></icon>
            外卖 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <icon slot="icon" name="order"></icon>
            订单
          </mt-tab-item>
          <mt-tab-item id="search">
            <icon slot="icon" name="search"></icon>
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <icon slot="icon" name="profile"></icon>
            我的
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

页面如下

使用成功！但是大家可能发现，svg图标选中时不会自动变色，那咱们就手动来改。首先创建一个class on为选中状态

.on{
    fill:#26a2ff;
}

注意，svg改变颜色不能用color而是要用fill。现在状态写好了，问题是什么时候给元素加上去？只能在点击足部导航时添加，点击导航目前只发生了一件事--selected变为选中的元素的ID。那我们就根据selected的值来添加class，可以狠狠的点击这里来查看官方文档。代码修改如下

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='miste'? 'on' : '']" name="miste" ></icon>
            外卖 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <icon slot="icon" v-bind:class="[ $store.state.selected=='order'? 'on' : '']" name="order"></icon>
            订单
          </mt-tab-item>
          <mt-tab-item id="search">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='search'? 'on' : '']" name="search"></icon>
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <icon v-bind:class="[ $store.state.selected=='profile'? 'on' : '']" slot="icon" name="profile"></icon>
            我的
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

看看页面

恩？还没有变色？ onclass我们已经加上了，但是被他自己的fill属性覆盖了。那我们就删除，打开svg下的svg图标，将fill属性删除

查看页面

变色成功！

7.3路由跳转
现在foot.vue点击只会变色，并没有切换页面，咱们foot.vue引进每个要用的页面里，代码如下

因为foot.vue只改变了vuex下的selected的值，所以我们要根据selected的值来进行路由跳转。在foot.vue的计算属性里修改如下

 computed:{
  //计算属性
    gopage:function(){
        return this.$store.state.selected
    }
  },

这样gopage永远返回最新的selected值。但是咱们在哪里调用gopage呢？在watch里调用

 watch:{
      gopage(newval,oldval){
          this.$router.push(newval);
      }
  }

watch可以监听state也可以监听计算属性computed，当他们的值改变时，就会发生回调，接收两个参数，第一个是改变后的新值，第二个是改变前的旧值。foot.vue整体代码如下

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='miste'? 'on' : '']" name="miste" ></icon>
            外卖 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <icon slot="icon" v-bind:class="[ $store.state.selected=='order'? 'on' : '']" name="order"></icon>
            订单
          </mt-tab-item>
          <mt-tab-item id="search">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='search'? 'on' : '']" name="search"></icon>
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <icon v-bind:class="[ $store.state.selected=='profile'? 'on' : '']" slot="icon" name="profile"></icon>
            我的
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>

export default {
  data () {
    return {
      
    }
  },
  components:{
  //注册组件

  },
  mounted:function(){
  //生命周期
      
  },
  computed:{
  //计算属性
    gopage:function(){
        return this.$store.state.selected
    }
  },
  methods:{
  //函数
      
  },
  watch:{
      gopage(newval,oldval){
          this.$router.push(newval);
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.on{
    fill:#26a2ff;
}
</style>

页面试试

ok！foot组件写完了。咱们现在来写miste.vue