vue组件：组件主要是扩展了HTML元素，使dom元素更加灵活，慢慢深入会发现组件是vue构建项目所必备的。
全局组件：
<div id="box">
<aaa></aaa>
</div>
<script>
//组件构造器
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
})
//注册组件
Vue.component('aaa',Aaa);
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
}
}).$mount('#box');
</script>
</body>```
局部组件：
```<body>
<div id="box">
<aaa></aaa>
</div>
<script>
//组件构造器
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'快捷快递'
}
}
})
//注册组件
// Vue.component('aaa',Aaa);
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
},
components:{
'aaa':Aaa
}
}).$mount('#box');
</script>
</body>```
组件的另一种写法：
```<body>
<div id="box">
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
template:'<strong>就家电及啊</strong>'
})
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
},
}).$mount('#box');
</script>
</body>```
```body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Home={
template:'<strong>aaa</strong>'
}
var vm=new Vue({
components:{
'aaa':Home
}
}).$mount('#box');
</script>
</body>```
```<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var vm=new Vue({
components:{
'aaa':{
data:function(){
return {
msg:'vue.js'
}
},
methods:{
change:function(){
this.msg='aaaaaa'
}
},
template:'<strong @click="change">{{msg}}</strong>'
}
}
}).$mount('#box');
</script>
</body>```
组件模板：
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<strong @click="change">{{msg}}</strong>
</template>
<script>
var vm=new Vue({
components:{
'aaa':{
data:function(){
return {
msg:'vue.js'
}
},
methods:{
change:function(){
this.msg='aaaaaa'
}
},
template:'#aaa'
}
}
}).$mount('#box');
</script>
</body>```
动态组件：
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="parent">
<div><!-- 必须有根元素包裹 -->
<h2>我是父组件</h2>
<strong>aaa</strong>
<bbb></bbb>
</div>
</template>
<template id="child">
<div><!-- 必须有根元素包裹 -->
<h2>我是子组件</h2>
<strong>bbb</strong>
</div>
</template>
<script>
var child={
template:'#child'
}
var parent={
template:'#parent',
components:{
'bbb':child
}
}
var vm=new Vue({
data:{
a:'aaa'
},
components:{
'aaa':parent
}
}).$mount('#box');
</script>
</body>```
这里说的是和1.0不同2.0版本必须有根元素div包裹。否则会报错。
父子组件的数据传递通过props作为桥梁来传递数据：
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="parent">
<div><!-- 必须有根元素包裹 -->
<h2>我是父组件</h2>
<strong>{{msg1}}</strong>
<bbb :getp="msg1"></bbb>
</div>
</template>
<template id="child">
<div><!-- 必须有根元素包裹 -->
<h2>我是子组件</h2>
<strong>{{msg2}}</strong>
获取父组件的数据-->{{getp}}
</div>
</template>
<script>
var child={
data:function(){
return {
msg2:'我是子组件的数据'
}
},
props:['getp'],//通过props声明自己要的数据 这是一个桥梁
template:'#child'
}
var parent={
data:function(){
return {
msg1:'我是父组件的数据'
}
},
template:'#parent',
components:{
'bbb':child
}
}
var vm=new Vue({
data:{
a:'aaa'
},
components:{
'aaa':parent,
}
}).$mount('#box');
</script>
</body>```
父子组件之间的数据变化：有些情况下我们非要想让父组件的数据和自组件同步变化，实现同时变化，vue1.0版本有sync方法，但是在vue2.0中被移除，官方说他会破坏单向数据流，那么就这样做：
1）父组件要传一个对象给子组件也就是json形式
2）用mounted方法中转
```<body>
<div id="box">
<aaa></aaa>
</div>
<template id="parent">
<div><!-- 必须有根元素包裹 -->
<h2>我是父组件</h2>
<strong>{{msg1.a}}</strong>
<bbb :getp="msg1"></bbb>
</div>
</template>
<template id="child">
<div><!-- 必须有根元素包裹 -->
<h2>我是子组件</h2>
<strong>{{msg2}}</strong>
<input type="button" value="按钮" @click="change"/>
获取父组件的数据-->{{getp.a}}
</div>
</template>
<script>
var child={
data:function(){
return {
msg2:'我是子组件的数据'
}
},
mounted:function(){
this.msg1=this.getp.a;
},
methods:{
change:function(){
this.getp.a='1111'
}
},
props:['getp'],//通过props声明自己要的数据 这是一个桥梁
template:'#child'
}
var parent={
data:function(){
return {
msg1:{
a:'我是父组件的数据'
}
}
},
template:'#parent',
components:{
'bbb':child
}
}
var vm=new Vue({
data:{
a:'aaa'
},
components:{
'aaa':parent,
}
}).$mount('#box');
</script>
</body>```
网友评论