1. Why can a new Vue construct an eventBus

Var app = new Vue({var app = new Vue({);created(){
        this.$emit()
        this.$on}}) // You can also use app like this.$emit()
app.$on()
app.$offEventBus eventBus eventBus eventBus eventBus eventBus eventBus eventBus$emit() // Trigger an eventBus.$on() // Listen for an eventBus.$offNew Vue is a new Vue, so new Vue is an eventHub. // Because it has exactly these three interfaces, it behaves exactly the same, which is called behavior-based developmentCopy the code

2. Start writing CSS styles

<! -- tabs-head.vue --> <style lang="scss" scoped>
  $tab-height: 40px;
  .tabs-head {
    display: flex;
    height: $tab-height; justify-content: flex-start; align-items: center; border: 1px solid red; > .actions-wrapper { margin-left: auto; }} </style> <! -- tabs-item.vue --> <style lang="scss"scoped> .tabs-item { flex-shrink: 0; padding: 0 2em; } </style>Copy the code

3. Should the active attribute be placed in data or props

  • If you need the user to pass, put it in props, because props is your input parameter,
  • Data does not need to be transmitted by users and maintains its own value
// In the abstract, just like writing a function,prop is an argument passed externally, data is a local variable, and the component is a functionfunctionFn (prop1, prop2) {var data1 var data2} / / when we were in the design of the API, there is no need to user data, we let the user name incoming, is actually the tabs / / tabs preach is passed, stubbornly used props can alsoCopy the code

4. In Mounted, create does not create because the element is already mounted

// app.js new Vue data: {selectedTab:'sports'
  }

  // index.html
  <g-tabs :selected.sync="selectedTab" @update:selected="yyy">
    <g-tabs-head>
      <g-tabs-item name="woman">
        <g-icon name="setting"> - < / g icon > beauty < / g - tabs - item > < / g - tabs - head > < / g - tabs > / / tabs. Vuemounted(){
      this.eventBus.$emit('update:selected'} // tabs-item ();} // tabs-item ()created(){
      this.eventBus.$on('update:selected',(name)=>{
        if(name === this.name){console.log(' I${this.name}Selected ')}else{the console. The log (` me${this.name}Not selected ')}})}, // tabs-pane Similarly, checked makes itself activeCopy the code

5. Add class to write calculated attribute

  // tabs-item.vue
    <div class="tabs-item" @click="xxx" :class="classes"></div>
    computed: {
      classes() {// classes is a calculated propertyreturn {
          active: this.active
        }
      }
    },
    created() {
      this.eventBus.$on('update:selected', (name) => { this.active = name === this.name; })}, // tab-pane, same thing, but with an extra V-if ="active"Use to control switching to hide <div class="tabs-pane" :class="classes" v-if="active">
        <slot></slot>
    </div>
Copy the code

6. The component cannot change its props

/ / equivalent tofunction fn(obj){
        obj.a = '1'
        returnObj} // No big problem, but we generally don't change things from parameters, the same with vue, if you have to changefunction fn(obj,n){
        obj.a = '1'
        n = 2
        var number = n
        number = 2
        return obj
    }
Copy the code

7. Frame the main purpose

// Keep the team's SB from writing junk code to ensure average code qualityfunction fn(obj){
        obj.a = '1' // bad
        return obj
    }
    function fn(obj,n){
        obj.a = '1'
        n = 2
        var number = n // good
        number = 2
        return obj
    }

Copy the code

Finally: Personal wechat, welcome to exchange!