关于vue.js:Vue开发技巧二

8. 函数式组件
无状态 无奈实例化 外部没有任何生命周期函数 一切都是通过 context 参数传递
context 属性有: 1.props：提供所有 prop 的对象 2.children: VNode 子节点的数组 3.slots: 一个函数，返回了蕴含所有插槽的对象 4.scopedSlots: (2.6.0+) 一个裸露传入的作用域插槽的对象。也以函数模式裸露一般插槽。5.data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件 6.parent：对父组件的援用 7.listeners: (2.3.0+) 一个蕴含了所有父组件为以后组件注册的事件监听器的对象。这是 data.on 的一个别名。8.injections: (2.3.0+) 如果应用了 inject 选项，则该对象蕴含了该当被注入的属性

<template functional>
  <div v-for="(item,index) in props.arr">{{item}}</div>
</template>

1. components 和 Vue.component

 部分注册
export default{components:{home}
}
全局注册
Vue.component('home',home)

1. Vue.extend

有时须要将一些元素挂载到元素上，须要用到 extend

// 创立结构器
var Profile = Vue.extend({template: '<p>{{extendData}}</br> 实例传入的数据为:{{propsExtend}}</p>',//template 对应的标签最外层必须只有一个标签
  data: function () {
    return {extendData: '这是 extend 扩大的数据',}
  },
  props:['propsExtend']
})

// 创立的结构器能够挂载到元素上, 也能够通过 components 或 Vue.component() 注册应用
// 挂载到一个元素上。能够通过 propsData 传参.
new Profile({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#app-extend')

// 通过 components 或 Vue.component() 注册
Vue.component('Profile',Profile)

11.mixins
有些组件有反复的 js 逻辑 校验 能够放入 mixins

const mixin={created(){this.dealTime()
    },
    methods:{dealTime(){console.log('这是 mixin 的 dealTime 外面的办法');
      }
  }
}

export default{mixins:[mixin]
}

1. extends

只能单次扩大一个组件

const extend={created(){this.dealTime()
    },
    methods:{dealTime(){console.log('这是 mixin 的 dealTime 外面的办法');
      }
  }
}

export default{extends:extend}

1. Vue.use()

会触发 install 函数

1. install