Vue项目中细节问题整理

自从使用vue做项目以来，自己陆续遇到一些细节的问题，虽然最后都解决了，但有的花费了很长时间或者查阅了很多资料才解决。因此就有了想记录一下的想法，一来方便自己记忆，二来也给遇到同样问题的小伙伴提供一个参考。有些方案可能就不是那么优雅和完善，如果你有更好的方案，欢迎补充和交流。本文会长期更新...

问题大纲：

• 自定义Element UI样式
• 设置ElementUI表格组件的表头样式
• 路由传参
• 非父子组件间通信

---

1.自定义Element UI样式

在使用Element UI时难免会遇到框架内的组件的样式不能满足设计稿的要求的情况，这时就需要我们使用到自定义样式。但因为Element UI是全局引入的，所以你在单个组件样式里面是不能加scoped的，使用！important又会改变整个样式，但确实又有这种需求，因此可以使用以下两种方式处理：

• 方式一：使用命名空间来解决 ——给你要修改内容的父级添加一个class类

<style>
.container{
  /* 命名空间 */
  .el-button{
    background:red;
  }
}
</style>

• 方式二：使用深度选择器通过父组件设置样式来改变子组件对应的样式
  当父组件使用了scoped，但在父组件希望能够影响子组件的样式，可以使用>>>来实现：

<style scoped>
  .container >>> .el-button{
    /*.....*/
  }
</style>

编译之后就是：

.container[data-v-f3df3d] .el-button{
  /*.....*/
}

注:如果在项目使用sass或less这样的预处理，需要使用/deep/代替>>>

.container /deep/ .el-button{
  /**....*/
}

2.设置ElementUI表格组件的表头样式

在使用Element UI的表格的时候，表头的样式无法通过css去自定义，官方给出了一个header-cell-style的属性,可通过该属性来自定义表头样式。该属性接受两种值:函数/对象
1.函数写法：

<el-table :header-cell-style="setTableHeaderStyle"></el-table>

setTableHeaderStyle ({row, rowIndex}) {
  return "background:'#f5f7f9',color:'#000',textAlgin:'center',height:'40px'"
}

2.对象写法：

<el-table :header-cell-style="{background:'#f5f7f9',color:'#000',textAlgin:'center',height:'40px'}"></el-table>

注意：对象写法样式属性需要使用驼峰命名法，否则会报错

3.路由传参

在实际项目中路由带参跳转导航是经常遇到的需求，这里就分享两种平常用到的。

• 方式一：

// 配置路由
const router = new Router({
  routes: [
    // 文章详情页路由
    {
      path: '/article',
      name: 'article',
      component: Article
    }
  ]
})
// 从文章列表页设置跳转导航
this.$router.push({name: 'article', query: {id: articleId}})
// Url
localhost:8090/article?id=20
// 详情页获取id
this.$route.query.id  // 20

• 方式二：

// 文章详情页路由
const router = new Router({
  routes: [
    {
      path: '/article/:id',
      name: 'article',
      component: Article
    }
  ]
})
// 从文章列表页设置跳转导航
this.$router.push({path: `/article/${id}`})
// Url
localhost:8090/article/20
// 详情页获取id
this.$route.params.id  // 20

4.非父子组件间通信

在Vue中处理父子组件之间的通信都比较简单，非父子组件之间要相对复杂点，下面就介绍适用不同情况的三种方式：

• 同一组件内兄度组件之间的数据通信

即：两个兄度组件都在一个组件内被使用，拥有同一个父组件，此时可通过父组件进行桥接。

// a组件向b组件传递数据

// parent.vue
<template>
  <div>
  <-接收input事件->
    <a @input='handleInput'></a>
  <-向b组件传递数据->
    <b :content='inputValue'></b>
  </div>
</template>
<script>
import A from './a.vue'
import B from './b.vue
export default {
  components: {
    A,
    B
  },
  data () {
    inputValue: ''
  },
  methods: {
    // 接收a组件派发过来的数据，并赋值给当前组件变量进行桥接
    handleInput (val) {
      this.inputValue = val
    }
  }
}
</script>

// a.vue
<template>
 <div>
  <input @input='handleInput' :value='value'/>
 </div>
</template>
<script>
  export default {
    data () {
      return {
        value: ''
      }
    },
    methods: {
      handleInput (event) {
        const value = event.target.value
        // 向外派发一个input事件
        this.$emit('input', value)
      }
    }
  }
</script>

// b.vue
<template>
 <div>
  <p>{{content}}</p>
 </div>
</template>
<script>
  export default {
    props: {
      content: {
        type: [String, Number],
        dafault: ''
      }
    }
  }
</script>

• 非同一文件内的组件通信

思路：非同一组件内的通信需要借助新建一个Vue实例bus实例上通过on()监听$bus实例上的事件和发过来的数据。

// 新建文件bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus

// main.js
...
import Bus from './bus/bus'
// 将bus实例挂载到Vue根实例上
Vue.prototype.$bus = Vue

// a.vue
// a组件发送数据
<template>
  <div>
    <button @click='handleClick'>点击发送</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: 'Hello'
    }
  },
  methods: {
    handleClick () {
      // 给$bus实例上绑定一个事件，并携带数据派发出去
      this.$bus.$emit('on-click', this.message)
    }
  }
}
</script>

// b.vue
// b组件接收收据
<template>
 <div>
  <p>{{message}}</p>
 </div>
</template>
<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    // 监听$bus实例上的事件，接收到数据，回调函数的参数就是接收到的数据
    this.$bus.$on('on-click', msg => {
      this.message = msg
    })
  }
}
</script>
export default {

}
</script>

• 使用状态管理工具-- Vuex

5.树形菜单实现

• 递归组件
• render函数实现
  https://zhuanlan.zhihu.com/p/34458404