vue 混入 mixin ,分发 vue 组件中重复的功能
局部的书写格式
// mixin.js
var mymixin = { // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该怎么写,这就怎么写
data(){
return {
a:"hello world"
}
}
}
export default mymixin // 将对象暴露出去
vue 中组件的写法
import mymixin from "./mixin.js" // 引入 mixin.js 文件
export default {
data(){
b:"hello world"
},
mixins:[mymixin], // mixins 的用法,值是一个数组,里面放着 mymixin 的对象
mounted(){
console.log(this) // 组件实例上 data 属性上便拥有了 a 属性了,而且我们在别的组件上引入 mixin.js 的话,也会拥有 a 属性
}
}
注意事项:
我们我们组件中有 data 属性,而 mixin.js 中也有 data 属性,vue 会如何处理呢?
数据对象递归合并(就是说:将 组件中的 data 属性,和 mixin.js 中的 data 属性,合并为一个 data 属性),那么还有一种情况,组件 data 中有一个 a 属性,mixin.js 的 data 中也有一个
a 属性,合并的时候,就只会合并 组件中 a 属性,mixin.js 中的 a 属性,便会被抛弃
2. 全局注入混合 mixin
上面的例子,是局部的使用 mixin ,我们每次使用都需要引入 mixin.js 的文件,那么我们所有的组件都拥有共同的内容,那么使用全局注入 mixin 再好不过了
使用方法:main.js 中
Vue.mixin({ // 全局注入混合对象
data(){
return {
a:"你好,世界"
}
}
})
这样我们的所有组件 data 中都会有 a 这个属性
当然上面的例子只是以 data 为案例,我们组件中的东西都可以写在 mixin 中,只有一个条件,那就是组件中的东西相同
自定义指令:Vue.directive(参数一,参数二) // 参数一:指令的名字 不允许带 v-,参数二:对象
案例:如 v-focus 全局注册
Vue.directive('focus',{
// 当被绑定的元素插入到 dom 中时
inserted(el){
console.log(el) // 被绑定自定义指令的 dom 元素
el.focus() // 元素的自动聚焦方法
}
})
参数二:对象上拥有的钩子函数
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
update:当组件的 VNode 更新时调用
钩子函数的参数:
el:指令所绑定的元素,可以用来直接操作 DOM 。
binding:是一个对象,name 指令名,value:指令值
expression:字符串形式的表达式
自定义指令的使用
<input v-focus />
过滤器 // 对数据的处理
标识符 | 俗称管道符
在 vue 组件中
局部
<h1> {{a | upper}} <h1> // 这样我们便得到的大写的 HELLO
export default {
data(){
return {
a:"hello"
}
},
filters:{
upper(value){
console.log(value) // 代表管道符前面的数据
return value.toUpperCase() // 必须 return 对前面数据的处理
}
}
}
全局处理:在 main.js 中
Vue.filter('upper', function (value) {
return value.toUpperCase() // 必须 return
})
// 这样的话所有组件都可以使用 upper 的管道符来将 字符串变大写