本文最后更新于 2024年6月7日 下午
刚开始接触前端，第一个接触的框架是Vue，众所周知“数据驱动”和“组件化”是vue.js两个最重要的特点。组件化是为了方便代码复用，提高开发效率。常见的vue组件写法有四种，各有特色，适用于不同的场景。
入门时已经接触到了“组件”的概念，但是当时看到的组件写法，和第一份项目代码中的写法完全不同，所以当时很困惑，所以收集了一下Vue中“组件”的不同写法在此。
script标签引入
全局组件
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
| <body>
<div id="app">
<componentName></componentName>
</div>
<script>
Vue.component('componentName', {
data() {
return {
message: "hello",
}
},
method: {
},
// 组件中的方法
//......
// 组件其他的属性和方法
template: "<div></div>",
// 组件的html结构,
})
new Vue({
el: '#app'
})
</script>
</body>
|
- 这样注册的组件，可以被
script标签中的其他Vue实例使用。
- 但缺点是因为是全局组件，所以使用的时候要注意名字唯一。
局部组件
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
33
| <body>
<div id="app">
<componentName></componentName>
</div>
<script>
var myComponent = {
data() {
return {
message: "hello",
}
},
method: {
},
// 组件中的方法
//......
// 组件其他的属性和方法
template: "<div></div>",
// 组件的html结构,
}
new Vue({
el: '#app',
components: {
myComponent,
}
})
</script>
</body>
|
template标签引入
全局组件
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
33
34
35
| <body>
<template id="my-component">
hello
</template>
<div id="app">
<componentName></componentName>
</div>
<script>
Vue.component({
data() {
return {
message: "hello",
}
},
method: {
},
// 组件中的方法
//......
// 组件其他的属性和方法
template: "#myComponent",
// 组件的html结构,
})
new Vue({
el: '#app',
})
</script>
</body>
|
局部组件
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
33
34
35
36
37
38
| <body>
<template id="my-component">
hello
</template>
<div id="app">
<componentName></componentName>
</div>
<script>
var myComponent = {
data() {
return {
message: "hello",
}
},
method: {
},
// 组件中的方法
//......
// 组件其他的属性和方法
template: "#myComponent",
// 组件的html结构,
}
new Vue({
el: '#app',
components: {
myComponent,
}
})
</script>
</body>
|
单文件组件
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
| <template id="component-test">
<div>
<h1>test</h1>
<xxxx></xxxx>
</div>
</template>
<script>
import xxxx from '../xxxx.min.js'
// .....
// 组件逻辑
export default {
name: 'myComponent',
components: {
xxxx,
},
data() {
return {
messgae: 'hello',
}
},
methods: {},
computed: {},
// .....
// 组件属性和方法
}
</script>
<style></style>
|
-
采用该种写法时，常常在项目目录下新建一个component目录，目录下放置“.vue”结尾的文件，文件名即组件名，一个文件对应一个组件。
-
文件按照“template”；“script”；“style”标签的顺序组织。
-
这样组件与组件之间互不影响，复用性高，其html、css、js均可复用。组件的结构、逻辑清晰。因此这个方式是代码量较大的项目中常用的组件写法。