vue自定义组件

 Vue自定义组件

1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});

Vue.component('aaa',Aaa);

*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<div id="CCC">
<aaa></aaa>
<my-aaa></my-aaa>//组件不可用，因为是局部组件，会提示报错


</div>
<script>
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'ddddd'
}
}
});
var Baa=Vue.extend({
template:'<h3>{{AA}}</h3>',
data(){
return {
AA:'EEEE'
}
}
});
Vue.component('aaa',Baa);

var vm=new Vue({
el:'#box',
components:{ //局部组件
'my-aaa':Aaa
}
});
var vm1=new Vue({
el:'#CCC'

});

</script>
</body>
</html>

 

posted @ 2018-08-20 17:32  逆水乘舟，不进则退  阅读(167)  评论(0)    收藏  举报