Preface

It is very common to see 3rd party libs in our projects, especially some UI frames. Meanwhile, here comes the problems.

How can we override partial 3rd party style and avoid our style being overridden by 3rd party.

Well, that’s two question.

Main

Override Partial 3rd Party Style

• lib-override.css

I think the first thing is to prepare a single file like lib-override.css to do this job whatever choice we make.

• override ways

It’s obvious that !important or #id can help us do this job. However, I wouldn’t suggest you to do that. I would choose to use class selector with namespace to solve this kind of problem. For example,

3rd party code is:

.el-button--primary {
  color: #fff;
}

Then you can write:

.app {
  .el-button--primary {
    color: #fff;
  }
}

Code above also works to avoid our style being overridden by 3rd party. In some cases, if one class is not enough you may have to add more class as namespace.

Ending

Reference

Preface

The first time I met .sync modifier, I didn’t know it very well. So, I seldom use that. Today, I am going to get it.

Main

In the past, I use “two-way binding” like this:

<div class="app" id="app">
  <button-counter :child-count="parCount" @add="add"></button-counter>
  <p>parent component {{parCount}}</p>
</div>

let app = new Vue({
  el: "#app",
  data: {
    parCount: 0
  },
  methods: {
    add() {
      this.parCount++;
    }
  },
  components: {
    "button-counter": {
      template:
        '<button @click="add">You clicked me {{ childCount }} times.</button>',
      props: ["childCount"],
      methods: {
        add() {
          this.$emit("add");
        }
      }
    }
  }
});

It was easy to understand except a little inconvenient. I need to listen and handle event in child and parent component. Also

true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

So, Vue recommends emitting events in the pattern of update:myPropName. For example:

<div class="app" id="app">
  <button-counter
    :child-count="parCount"
    @update:child-count="parCount=$event"
  ></button-counter>
  <p>parent component {{parCount}}</p>
</div>

let app = new Vue({
  el: "#app",
  data: {
    parCount: 0
  },
  methods: {},
  components: {
    "button-counter": {
      template:
        '<button @click="add">You clicked me {{ childCount }} times.</button>',
      props: ["childCount"],
      methods: {
        add() {
          this.$emit("update:child-count", this.childCount + 1); // child-count is right while childCount won't work
        }
      }
    }
  }
});

See? In this case, we don’t have to add event callback in parent component because vue have done that. And this is the principle of .sync. For convenience, Vue offers a shorthand for this pattern with the .sync modifier which would make the code above like:

<div class="app" id="app">
  <button-counter :child-count.sync="parCount"></button-counter>
  <p>parent component {{parCount}}</p>
</div>

let app = new Vue({
  el: "#app",
  data: {
    parCount: 0
  },
  methods: {},
  components: {
    "button-counter": {
      template:
        '<button @click="add">You clicked me {{ childCount }} times.</button>',
      props: ["childCount"],
      methods: {
        add() {
          this.$emit("update:childCount", this.childCount + 1); // childCount is right while child-count won't work
        }
      }
    }
  }
});

Also,

The .sync modifier can also be used with v-bind when using an object to set multiple props at once:

<text-document v-bind.sync="doc"></text-document>

This passes each property in the doc object (e.g. title) as an individual prop, then adds v-on update listeners for each one.

For more information, go Vue.js

Ending

Reference

Preface

It is very common for us to use console.log When we are in a development environment. So, how do you handle this when you are preparing to deploy it to server?

In the past, I chose to delete those debug logs. However, I guess nobody likes doing that and in some place, I really want to keep that.

Main

One day, I find a better way to handle this. Before the main js code, I add code below:

let urlSearchParams = new URLSearchParams(window.location.search)
let isDebug = urlSearchParams.get('debug') === '1'
if (!isDebug) {
  console.log = function() {}
}

Ending

Reference