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