在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的特性都会被自动隐式解析为 prop
在 2.5.0 及以上版本中，如果你使用了单文件组件(就是普通的.vue 文件),可以直接在 template 上声明functional
组件需要的一切都是通过 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>
9.components和 Vue.component
components:局部注册组件
export default{ components:{home} }
Vue.component:全局注册组件
Vue.component('home',home)
10.Vue.extend
场景:vue 组件中有些需要将一些元素挂载到元素上,这个时候 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 就可以实现这种混入
mixins 值是一个数组
const mixin={ created(){ this.dealTime() }, methods:{ dealTime(){ console.log('这是mixin的dealTime里面的方法'); } } } export default{ mixins:[mixin] }
12.extends
extends用法和mixins很相似,只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件
const extend={ created(){ this.dealTime() }, methods:{ dealTime(){ console.log('这是mixin的dealTime里面的方法'); } } } export default{ extends:extend }
13.Vue.use()
场景:我们使用 element时会先 import,再 Vue.use()一下,实际上就是注册组件,触发 install 方法;
这个在组件调用会经常使用到;
会自动组织多次注册相同的插件.
14.install
场景:在 Vue.use()说到,执行该方法会触发 install
是开发vue的插件,这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象(可选)
var MyPlugin = {}; MyPlugin.install = function (Vue, options) { // 2. 添加全局资源,第二个参数传一个值默认是update对应的值 Vue.directive('click', { bind(el, binding, vnode, oldVnode) { //做绑定的准备工作,添加时间监听 console.log('指令my-directive的bind执行啦'); }, inserted: function(el){ //获取绑定的元素 console.log('指令my-directive的inserted执行啦'); }, update: function(){ //根据获得的新值执行对应的更新 //对于初始值也会调用一次 console.log('指令my-directive的update执行啦'); }, componentUpdated: function(){ console.log('指令my-directive的componentUpdated执行啦'); }, unbind: function(){ //做清理操作 //比如移除bind时绑定的事件监听器 console.log('指令my-directive的unbind执行啦'); } }) // 3. 注入组件 Vue.mixin({ created: function () { console.log('注入组件的created被调用啦'); console.log('options的值为',options) } }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { console.log('实例方法myMethod被调用啦'); } } //调用MyPlugin Vue.use(MyPlugin,{someOption: true }) //3.挂载 new Vue({ el: '#app' });
更多请戳 vue中extend，mixins，extends，components,install的几个操作
15. Vue.nextTick