Vue实战技巧

# Vue实战技巧

# 1.导航栏跟随鼠标点击同步（变色）

利用route.path方法

<div
      @click="goPath('/home')"
      :class="{active:$route.path=='/home'}"
>
      <span>首页</span>
      <i class="iconfont icon-dingdan"></i>
</div>
<style>
       active {
           color:red
       }   
</style>

1
2
3
4
5
6
7
8
9
10
11
12

# 2.封装公共组件（插槽和prop）

插槽和props的区别

props一般是用来传递数据的

插槽一般是某个区域（功能块）

props的使用

//公共组件
<div>{{title}}</div>
<script>
  export default {
	name: "gshopHeader",
    props:{
      title:{
        request:true,
        type:String,
        default:'默认值'
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//子组建
<gshop-header :title="'订单'"></gshop-header>

1
2

插槽的使用

//公共组件
<slot name="left"></slot>
<div>{{title}}</div>
<slot name="right"></slot>

1
2
3
4

//子组件
<gshop-header :title="'标题'">
    <template v-slot:left>   //vue推荐用法
        <span class="header_search">
            <i class="iconfont icon-search1"></i>
		</span>
	</template>
	<template v-slot:right>
        <span class="header_search">
            <i class="iconfont icon-search1"></i>
        </span>
	</template>
</gshop-header>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 3.meta传参

公共组件在某一个组件中不需要，则通过route.meta来判断

router/index.js

{
      path: '/home',//需要公共组件
      component: () => import('../pages/home/home'),
      meta:{//通过meta传参
        isFooterContainer:true
      }
    },
    {
      path: '/login',//不需要公共组件
      component: () => import('../pages/login/login'),

1
2
3
4
5
6
7
8
9
10
11
12

App.vue

<footer-guide v-show="$route.meta.isFooterContainer"/>   //通过$route.meta来判断

编辑

上次更新: 2021/07/01, 20:33:02

← 阿里字体图标使用