和小程序一样，有个组件概念的出现。它的使用，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可，简直不要太方便！
全局组件component定义的三种方式 ：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| 第一种方法
1、var con = Vue.extend({
template: '<span> hello world</span>'
})
2、Vue.component('name', 模板对象)
Vue.component('mycon',con)
3、<div><mycon></mycon></div>
可以简写为：
1、Vue.component('mycon',Vue.extend({
template: '<span> hello world</span>'
}))
2、<div><mycon></mycon></div>
第二种方法
1、Vue.component('mycon', {
template: '<span> hello world</span>'
})
2、<div><mycon></mycon></div>
第三种方法
全局组件
1、Vue.component('mycon', {
template: '#tmp'
})
2、<template id="tmp">
<div>hello world</div>
</template>
3、<div><mycon></mycon></div>
|
私有组件
1
2
3
4
5
6
7
| <div><mycon></mycon></div>
定义私有方法components：
components:{
mycon: {
template: '<span> hello world</span>'
}
}
|
组件中的data，必须是函数，return出去：
1
2
3
4
5
6
| Vue.component('mycon', {
template: '#tmp',
data: function () {
return {msg: '组件中的数据'}
}
})
|
组件切换：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="app">
<a href="" @click.prevent="name='mycon1'">mycon1</a>
<a href="" @click.prevent="name='mycon2'">mycon2</a>
<component :is="name"></component>
</div>
Vue.component('mycon1', {
template: '#tmp1'
})
Vue.component('mycon2', {
template: '#tmp2'
})
var app = new Vue({
el: '#app',
data: {
name: 'mycon1'
}
})
|
父组件向子组件传值–props[]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div id="app">
<mycon :parentmsg='msg'></mycon>
</div>
<template id="tmp">
<div>
<h1>我是一个组件---{{ parentmsg}}</h1>
</div>
</template>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '父组件中的数据'
},
components: {
mycon : {
template: '#tmp',
props: ['parentmsg']
}
}
})
</script>
|
父组件向子组件传递方法,子组件向父组件传值–$emit()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <div id="app">
<mycon @func='show'></mycon>
</div>
<template id="tmp">
<div>
<input type="button" value="调用" @click="myclick">
</div>
</template>
<script>
var app = new Vue({
el: '#app',
data: { },
methods: {
show: function (data) {
console.log('父组件中的方法' + data) //可以通过这种方法，子组件向父组件传值
}
},
components: {
mycon : {
template: '#tmp',
methods: {
myclick: function () {
this.$emit('func', 123)
}
}
}
}
})
</script>
|
网络研习社系列文章：
@lemooljiang #network-institute
This page is synchronized from the post: vue的组件面面观 / 网络研习社#14