vue开发小技巧

mixins 多组件公用数据和生命周期

//test.js
export default {
    data() {
        return {
            a: 1,
            b: 2
        };
    },
    mounted() {
    },
    methods: {
    }
}

import test from './mixins/test';
export default {
    mixins: [test]
}

CSS scoped 局部穿透

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。

sass之类的预处理器无法正确解析 >>>，可以使用 /deep/ 操作符( >>> 的别名)

<style scoped>
  外层 >>> 第三方组件 {
      样式
  }
</style>

<style lang="scss" scoped>
  /deep/ 第三方组件 {
      样式
  }
</style>