31_混合组件（mixins）
2018-02-13 本文已影响0人
CHENPEIHUANG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<home></home>
<about></about>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
//定义通用的混合对象，然后将通用的对象混合到组件中，这样组件就不需要重复定义通用部分，可以达到很好复用
var minx={
created(){
console.log('created ....hello....');
},
data(){
return {
msg:'hello'
}
},
methods:{
show(){
alert('aaaaa')
}
}
}
//如果多个组件具有相同的数据或方法，可以将共有的部分抽取到混合对象，然后通过混合属性mixins将共有的数据或方法混合到指定组件中
//这样多个组件不需要重复定义相同的数据或方法
const Home={
template:'<div><h1 @click="show">主页。。。</h1><p>11111<input type="text"/>{{msg}}</p></div>',
mixins:[minx] //在组件中使用混合对象，将通用功能混合到当前组件
}
const About={
template:"<div><h2>关于</h2><p @click='show'>222222<input type='text'/>{{msg}}</p></div>",
mixins:[minx],
//如果混合对象中和组件内部定义了相同名称的方法或数据，以组件内部为准
created(){
console.log('about created......');
},
data(){
return {
name:'zhangsan',
msg:'lisi'
}
}
}
var vm=new Vue({
el:"#app",
components:{
'home':Home,
'about':About
},
data:{
which:'home'
}
})
</script>
</body>
</html>
