Vue2.0 tip

The functional components

Use: improve component performance, no strength, direct use

Personal understanding: Some processing commonly used for presentation

Ex. :

<template functional>
    <div :class="['status']">
      <span :class="['status-' + props.type]"> <slot></slot></span>
    </div>
</template>
Copy the code

or

<script>
    export default {
        functional : true , 
        name: "status",
        props : [
            'type' ,
        ]
    }
</script>
Copy the code

Vue inline template

Use: Move template content to external, of course, if the external template is not passed in, the internal template will take effect

Personal understanding: can display some pages of some logic, but the inside of the page logic is too flexible components so written

Ex. :

no

mixins

Usefulness: Business logic can be separated

Some common business can be removed from it, such as the most CMS tables, pagination, etc., and then vUE files are introduced in mixins

// mixins.js  
export default  function (type ) {
  return {
    data () {
      return {
        data: []./ / the data source}},methods : {
      setData () {
        // Send the request directly
        window.setTimeout((a)= > this.data = [1.2.3].200)
      }
    },
    created () {
      this.setData()
    }
  }
}
Copy the code
<! -- index.vue --> <template> <div class="content"> {{ data }} </div> </template> <script> import mixins from ".. /components/mixins"; export default { components:{ }, mixins:[mixins], mounted () { this.setData() } } </script> <style scoped lang='less'> </style>Copy the code

extends

Usefulness: Like mixins, but mixins can mix multiple ones, extends extends only one, and generally takes precedence over mixins

Ex. : no

render

key

$parent,$root

There will be times when we need to tell the parent to do something at a particular time. Of course we can use $emit() to tell the parent to do something via an event, but there is another way we can use $parent, we can use this.parent || this.$root

$attrs,$listeners

$attrs simply gets non-prop and non-class,style attributes from the parent component and passes them to the descendant component using v-bind=”$attrs”

The $Listeners are simply non-native event listeners from the parent component that can be passed on to the child component

Parent component | child components (used here$attrs.$listrners) | sun componentsCopy the code

v-if,v-show

Custom v – model

Scope slot

We know that slots can be named, and when multiple slots have the same name, they are scoped slots. We can use scope-props to get the value of the slot binding

// Subcomponent <template> <div> <slot name="avatar" :user="user"></slot>
        <slot name="avatar" :user="user"></slot>
    </div>
</template>
<script>
export default {
    data () {
        return {
            user : {username : 'xx' , password : 'yyy'}
        }
    }
}
</script>
Copy the code
// Parent <template> <div> <child> <template slot-scope="user" >
                {{ user.avatar }}
            </template>
        </child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    components:{child}
}
</script>
Copy the code

mount,el