1、mixins
在vue示例化对象中混入
(1)混合属性,能将mixin内对象的内容混合进入vue中相同属性的内容,相同不会覆盖
(2)在main.js中vue实例化对象,和data同级添加
(3)mixins:[{对象}]; 因为vue实例化对象中data形式为对象,所以可以直接对象混入
在组件中混入
(1)let xx={data:function( return {键值对})}
(2)因为组件中data是函数,所以混入data形式和vue实例化对象中混入data不一样
(3)组件一级属性,mixins:[xx]
Ejemplo de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id='app'>
hello
{{msg}}
{{age}}
<test/>
</div>
<script>
//封装生命函数到对象中
let options={
created:function(){
console.log('vue生命周期created');
console.log(this)
},
beforeMount(){
console.log("生命周期beforeMount");
},
mounted(){
console.log('生命周期mounted');
},
data:{
age:17,
msg:'world'
}
}
let options2={
created:function(){
console.log('vue生命周期created');
console.log(this)
},
beforeMount(){
console.log("生命周期beforeMount");
},
mounted(){
console.log('生命周期mounted');
},
data:function(){
return {age:17,msg:'world'}
}
}
Vue.component('test',{
template:'<div>{{msg}}</div>',
mixins:[options2]
})
let app=new Vue({
el:'#app',
data:{
msg:'hello'
},
mixins:[options]
})
</script>
</body>
</html>
