关于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>

components和Vue.component

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

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]}

extends

只能单次扩大一个组件

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

Vue.use()

会触发install函数

install