-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponent.html
92 lines (91 loc) · 1.92 KB
/
component.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue组件</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<test></test>
<test2></test2>
<child message="Hello Vue"></child>
<!-- 动态绑定 -->
<child v-bind:message="message1"></child>
<check1></check1>
<br />
<p>{{total}}</p>
<test3 v-on:increment="incrementTotal"></test3>
<br />
<test3 v-on:increment="incrementTotal"></test3>
</div>
</body>`
<script>
// 全局组件
Vue.component("test", {
template: "<h1>测试</h1>"
});
//局部组件
var Child = {
template: "<h3>测试2</h3>"
};
Vue.component("child", {
//父组件用来传递数据的属性
props: ["message"],
template: "<h5>{{message}}</h5>"
});
Vue.component("test3", {
template: '<div><button v-on:click="incrementHandler(1)">-</button>{{count}}<button v-on:click="incrementHandler(2)">+</button></div>',
data: function() {
return {
count: 0
}
},
methods: {
incrementHandler: function(value) {
if (value == 1) {
this.count -= 1;
this.$emit('increment', value);
} else {
this.count += 1;
this.$emit('increment', value);
}
}
}
})
//props验证(版本要是开发者版本)
Vue.component("check1", {
props: {
age: {
//数据类型
type: [Number, Boolean],
//必填项
required: true,
//初始值
default: 100,
}
},
template: "<h6>测试props验证{{age}}</h6>"
})
new Vue({
el: "#app",
components: {
"test2": Child
},
data: {
message1: "Hello",
total: 0
},
methods: {
incrementTotal: function(value) {
if (value == 1) {
this.total--;
} else {
this.total++;
}
}
}
});
/* prop是单项绑定的,当父组件的值发生变化时会传递到子组件但不会反过来 */
</script>
</html>