注册组件的语法糖
其他
2020-02-25 12:34:08
阅读次数: 0
效果
将extend()和component()结合
全局组件注册语法糖
1
2
3
4
5
6
7
8
|
Vue.component('cpn', {
template: `
<div>
<h2>标题1</h2>
<p>内容1</p>
</div>
`
})
|
局部组件注册语法糖
1
2
3
4
5
6
7
8
|
{
template: `
<div>
<h2>标题1</h2>
<p>全局组件的语法糖</p>
</div>
`
}
|
注册组件的语法糖.html
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
39
40
41
42
43
44
45
46
47
|
<html lang="en">
<head>
<meta charset=大专栏 注册组件的语法糖pan class="string">"UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn1', {
template: `
<div>
<h2>标题1</h2>
<p>全局组件的语法糖</p>
</div>
`
})
const app = new Vue({
el: '#app',
data: {
message: 'Hello'
},
components: {
'cpn2': {
template: `
<div>
<h2>标题2</h2>
<p>局部组件的语法糖</p>
</div>
`
}
}
})
</script>
</body>
</html>
|
转载自www.cnblogs.com/lijianming180/p/12360951.html