关于v-bind：

来源：4-3 组件参数校验与非 props 特性

卤蛋Ys

2018-10-25

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
</head>
<body>
	<div id="root">
		<child :content="hello"></child>
	</div>
	<script>
		Vue.component('child', {
			props:{
				content:{
					type: String,
					required:false,//是否必填
					default:'default value',//默认值
					validator: function(value){
						return (value.length = 5)
					}
				}
			}, 
			template:'<div>{{content}}</div>'
		})
		
		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
</head>
<body>
	<div id="root">
		<counter :count="3" @change="handleChange"></counter>
		<counter :count="2" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>
	<script>
		
		var counter = {
			props:['count'],
			data:function(){
				return{
					number :this.count
				}
			},
			template:'<div @click="handleClick">{{number}}</div>',
			methods:{
				handleClick:function(){
					this.number =this.number+2;
					this.$emit('change',2)
				}
			}
		}

		var vm = new Vue({
			el:'#root',
			data:{
				total:5
			},
			components:{
				counter:counter
			},
			methods:{
				handleChange:function(step){
					this.total+=step
				}
			}
		})
	</script>
	
</body>
</html>

老师，我想知道为什么第一个多加了：之后，会报错hello未定义，而第二个不会，区别在哪里？

写回答

1回答