vue-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
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

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h3>父组件中使用了count</h3>
			<p>{{count}}</p>
			<custom-component :count="count" @increment-click="countHandle"></custom-component>
		</div>
		<script>

		//自定义事件 

			//全局组件
			//count传入的类型为Number
			Vue.component('custom-component',{
				props:{
					count:{
						//type:Number,
						//type:[Number,String],
						//default:10
						//required:true
						validator:function (value){
							console.log(value);	

							return value > 10
						}
					}
				},
				data(){
					return {
						incrementCount:this.count  //作为局部这个组件的data的初始值
					}
				},
				computed:{
					incrementCount2(){
						return this.incrementCount
					}
				},
				template:`
					<div>
						<h2>我是一个自定义的组件</h2>
						<input type="button" value="改变count的值" @click="changeCount" />
						{{incrementCount2}}
					</div>
				`,
				methods:{
					changeCount(){
						this.incrementCount++;
						//通知父组件 发生了改变
						this.$emit("increment-click")	
					}
				}
			})

			new Vue({
				el:"#app",
				data:{
					count:20
				},
				methods:{
					countHandle(){
						//alert("子组件点击了");
						this.count++;
					}
				}
			})
		</script>
	</body>
</html>