mixin
-
将一些可复用的对象参数封装给mixin,将data,methods,computed,created,进行混合,
-
如果混合过程中,遇到同名属性,采用vue实例对象的或者组件对象中的,
-
如果具有相同的钩子函数(生命周期函数),那么两个函数会被放入数组中,均会被调用,(先调用mixin中的,再调用实例对象/组件对象中的)
-
如果具有相同的函数,调用vue实例对象中的函数
1.全局混入:
注:谨慎使用,因为每一个实例对象都会进行混入
Vue.mixin({
//可复用的对象或函数
data(){
return {}
},
methods:{},
created(){}
})
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
<script>
window.onload=function(){
Vue.mixin({
data(){
return {
num:10
}
},
created(){
alert('mixin中的created')
},
methods:{
handler(){
alert('这是mixin的handler')
}
}
})
var app=new Vue({
el:'#app',
data:{
str:'小仙女丫',
num:2
},
methods:{
handler(){
alert('new vue函数')
}
},
created(){
alert('new Vue的created')
},
components:{}
})
}
</script>
</head>
<body>
<div id="app">
{{num}}--{{str}}
<button v-on:click='handler'>花花</button>
</div>
</body>
</html>
局部混入:
var mixin={
data(){
},
methods:{}
}
new Vue({
el:
data
methods
mixins:[mixin]
})
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
<script>
window.onload=function(){
var mixin={
data(){
return {
num:10
}
},
created(){
alert('这是mixin的alert')
}
}
var app=new Vue({
el:'#app',
data:{
num:99
},
methods:{},
mixins:[mixin],
components:{
'my-div':{
data(){
return {
num:100
}
},
methods:{},
mixins:[mixin],
template:`
<div>
<p>{{num}}</p>
</div>
`
}
},
})
}
</script>
</head>
<body>
<div id="app">
{{num}}
<my-div></my-div>
</div>
</body>
</html>