In the actual project developed by VUE. It is common to encounter situations where packaged components need to be styled differently. In this case, changing styles in the wrong way can contaminate encapsulated components. If the basic style is not properly encapsulated within the component. It is easy to deal too much with style issues when calling components. None of this is reasonable. This article discusses how a parent component can modify the style of a child component, which can be handled with ease when there are different style requirements.

The common title component is used as an example.

1. Modify the class

You can pass the class name directly to the child component. Or display the hidden class name according to Boolean true or false.

2. Modify the style

You can modify the style based on the object’s key-value pairs. Because style has a higher priority. So you can often change the style. If you define a key name in the child component, you can change the properties of the child component by passing the key value in the parent component. You can also write style objects directly in the parent component. Pass in the child component so that you don’t have to write the key in advance in the child component, so that you can change some of the attributes that are not commonly used (note: because of the nature of the object, if the object name is the same. The following object overwrites the previous object, so try to put customStyle after it.)

3. Use computed to get computed attributes

The style of the evaluated properties can be obtained based on the parameter passed to props.

4. Use penetration

Vue scoped has single-page style protection. So you can use penetration :: V-deep to modify the style syntax in child components: parent component class :: V-deep child class

5. The parent component is written with a special style (important, so that js and CSS in the component can handle variables passed in by the parent component).

How it works: A parent component passes a child component variable in style. Child components change color based on variables.

/ / the parent component
style="--lc: pink"
/ / child component
$dfColor: lightblue;
background: var(--lc, $dfColor); // The second argument is the default variable value
Copy the code

6. Use javascript to style child components

You need to get the child component’s DOM after this.$nextTick. You then manipulate the DOM to modify the styles of the child components. You can also define a function in a child component and then change the style of the child by calling its function from the parent component.

created() {
    this.$nextTick(() => {
      let ele = this.$refs.titleRef;
      let pp = ele.$el.getElementsByTagName('p')[0];
      pp.style.background = "red"
    })
},
Copy the code

7. Look at the code

  1. The parent component
/ / the parent component
<template>
  <div>
    <g-title
      t="Test it."
      class="aa"
      ref="titleRef"
      cc="cc"
      borderBottom
      style="--lc: blue;"
      :customStyle="myStyle"
    ></g-title>
  </div>
</template>

<script>

export default {
  name: "Test1",
  data() {
    return {
      myStyle: {
        fontSize: '100px',
      }
    };
  },
  created() {
    // We must wait until the DOM is updated before we can manipulate the DOM
    this.$nextTick(() => {
      let ele = this.$refs.titleRef;
      let pp = ele.$el.getElementsByTagName('p')[0];
      pp.style.background = "red"})}}; </script>Copy the code
  1. Child components
<! -- * @ Description * Public title component. You can set title, you can set the left vertical bar color * @ use method * <g-title t="4. Back to the top"></g-title>  <g-title t="Pink on the left" style="--lc: pink"/>
* 
<g-title
  t="Test it."
  class="aa"
  ref="titleRef"
  cc="cc"
  borderBottom
  style="--lc: pink;"
  :customStyle="myStyle"></g-title> * @lasteditTime: last updated *2021-10-30
-->
<template>
  <div
    v-if="title || t"
    class="bb"
  >
    <p
      class="title"
      :class="{'has-border':borderBottom, cc}"
      :style="[{color: color}, customStyle, setBorderRadius]"
      data-color="blue"
    >{{title || t}}</p>
  </div>
</template>
    
<script>
let cl = "yellow";
export default {
  name: "GTitle",
  props: {
    title: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '',
    },
    t: {
      type: String,
      default: ''
    },
    cc: {
      type: String,
      default: ''
    },
    other: {

    },
    customStyle: {
      type: Object,
      default: () => { },
    },
    borderBottom: {
      type: Boolean,
      default: false,
    },
    br: {
      type: String,
      default: '20',
    }
  },
  computed: {
    setBorderRadius() {
      let obj = {};
      Var (--lc) is the value of the variable passed in by the parent component. If --lc has no value, the value of the second argument is taken
      if (this.br) {
        obj = {
          borderRadius: this.br + 'px',
          borderTop: this.br + 'px solid var(--lc, yellow)'
        }
      }
      returnobj; }}}; </script> <style scoped lang='scss'> $dfColor: lightblue;.title {
  width: 100%;
  height: 28px;
  padding-left: 22px;
  line-height: 28px;
  position: relative;
  margin: 20px 0;
  font-weight: 600;
  box-sizing: border-box;
  color: var(--cl, $dfColor); // If --cl is not passed. The variable of the second argument is used by default
}
.title: :before {
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 0;
  content: "";
  width: 6px;
  height: 22px;
  z-index: 1;
  background-color: var(--lc, $dfColor); // Color of the vertical bar on the left
}
.has-border {
  border-bottom: 1px solid var(--lc, $dfColor);
}
.cc {
  margin: 100px;
}
</style>
Copy the code