资源
directives
指令
- 定义一个全局的指令:
x
,Vue
会自动在前面加上 v-
, 它可以在任何地方使用,它的作用是点击打印一个字符串
import Vue from 'vue'
Vue.directive('x', {
inserted(el) {
el.addEventListener('click', function(){
console.log('全局的 v-x 指令')
})
}
})
inserted
表示当元素被插入到 DOM 中时。除此之外还有:
bind
只调用一次,指令第一次绑定到元素时调用
update
所在组件的 VNode 更新时调用
componentUpdated
所在组件的 VNode(包括子 VNode) 更新时调用
unbind
只调用一次,指令与元素解绑时调用
一个自定义指令中总共可以自定义五个函数
- 定义一个局部指令:
x
。它可以在你所声明的组件内部使用
import Vue from 'vue'
new Vue({
...
directives: {
'x':{
inserted(el) {
el.addEventListener('click', () => console.log('局部指令 x'))
}
}
}
...
}).$mount('#app')
- 以上, directives 的主要作用,就是原生 DOM 操作,减少重复。
组合
-
mixins
混入
mixins
的主要作用时减少 data、methods、钩子的重复
- 当有多个组件需求相同的操作时,抽取其中相同的部分,放在一个 JS 文件里面(比如 mixins/commen.js);
const commen = {
}
export default commen
- 当其他组件需要用到这些代码时,使用 mixins 属性导入
<script>
import commen from '../mixins/commen.js'
export default {
...
mixins: [commen],
}
<script>
- 混入的规则
- 组件里的属性和函数会覆盖混入内容中相同的属性和函数
- 具体规则: 文档
-
extends
继承
- extends 是比 mixins 更抽象一点的封装
- 声明一个新的类,把它作为 Vue 的扩展,继承自 Vue
import Vue from 'vue'
const myVue = Vue.extend({
})
export default myVue
<script>
import myVue from '../myVue.js'
export default {
extends: myVue,
...
}
<script>
- myVue 同时也可以作为构造函数代替 Vue,生成 Vue 的实例
-
provide
(提供) and inject
(注入)
- 用于大范围的 data 和 method 等共用,祖先提供数据,后代注入数据;隔 N 代共享信息
- provide 提供数据, inject 获取数据
export default {
provide(){
return {
x: this.x,
y: this.y
}
}
}
export default {
inject: ["x", "y"]
}