Vue2.0 小技巧

functional 组件

用处: 提高组件性能,没有实力,直接使用

个人理解: 一般用于展示的一些处理

例:

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

或者

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

Vue 内联模板

用处: 将模板内容移动至外部,当然如果外部没传入模板的话,就自然是内部模板生效

个人理解: 可以将一些页面展示的一些逻辑,但是里面的页面逻辑过于灵活的组件这样编写

例 :

暂无

mixins

用处: 可以将业务逻辑进行分离

个人理解 : 可以将一些公共的业务将他抽离出来,例如CMS最多的表格,分页 等等逻辑,进行抽离 , 然后vue 文件在mixins 中引入

// mixins.js  
export default  function (type ) {
  return {
    data () {
      return {
        data : []  , // 数据源
      }
    },
    methods : {
      setData () {
        // 直接发送请求
        window.setTimeout(() => this.data = [1,2,3] ,200)
      }
    },
    created () {
      this.setData()
    }
  }
}

<!-- 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>

extends

用处 : 和mixins 一样, 但是mixins 可以混合多个, extends 只能继承一个 , 通常情况下优先使用mixins

例: 暂无

render

key

$parent,$root

有时候我们会有这样的需求,在某个特定的时候我们得让父组件做出一些操作,当然我们可以使用$emit() 通过事件的方式通知父组件来进行某些操作,但是也有另外一种方式就是我们的 $parent, 我们可以使用this.parent || this.$root

$attrs,$listeners

$attrs 简单来说就是 获取父组件给得非prop以及非class,style等其他属性值 可以继续使用v-bind="$attrs" 传递给孙组件

$listeners 简单来说就是 获取父组件给的非.native 的事件监听,可以将其继续给子组件

父组件
|
子组件 (在这里使用$attrs,$listrners)
|
孙组件

v-if,v-show

自定义v-model

作用域插槽

众所周知 插槽可以取名字, 当多个插槽名字相同的时候,他们就行成了作用域插槽, 我们可以使用 scope-props 来获取插槽绑定的值

// 子组件
<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>

// 父组件
<template>
    <div>
        <child>
            <template slot-scope="user" >
                {{ user.avatar }}
            </template>
        </child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    components:{child}
}
</script>

mount,el