Vue学习：父子组件间数据传递，参数校验与非props特性
一、父子组件间数据传递
1.1 父组件通过属性向子主键传递数据
下面例子中给子组件添加属性count，然后子组件在pros里接收
<body>
<div id="app">
<counter :count="0"></counter>
<counter :count="1"></counter>
</div>
</body>
<script>
var counter = {
props:['count'],
template:'<div>{{count}}</div>'
}
var vm = new Vue({
el:"#app",
components:{
counter:counter
}
})
</script>
1.2 实现点击累加功能，注意单项数据流概念
父组件可以向子组件传递参数，但是子组件不可以直接修改父组件传递过来的属性值，Vue会报警告
//局部组件
var counter = {
//子组件接收父组件数据
props:['count'],
template:'
<div @click="handleClick">{{count}}
</div>',
data:function(){
return {
number: this.count
}
},
methods:{
handleClick:function(){
//避免直接操作父组件传递过来的count
this.number++
}
}
}
1.3 总结：父组件利用属性给子组件传值，子组件通过向外触发事件父组件监听传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Derrick
</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<counter :count="2" @change="handleChange"></counter>
<counter :count="3" @change="handleChange"></counter>
<div>{{total}}
</div>
</div>
</body>
<script>
var counter = {
props:['count'],
template:'<div @click="handleClick">{{count}}</div>',
data:function(){
return {
number: this.count
}
},
methods:{
handleClick:function(){
this.number++
this.$emit('change',1)
}
}
}
var vm = new Vue({
el:"#app",
data:{
total:5
},
components:{
counter:counter
},
methods:{
handleChange:function(one){
this.total += one
}
}
})
</script>
</html>
二、参数校验与非props特性
2.1 简单校验，利用数组的形式，要求传递的值为数字类型或者字符串类型
<body>
<div id="app">
<child :content="123"></child>
</div>
</body>
<script>
Vue.component('child',{
props:{
content : [Number,String]
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:"#app",
})
</script>
2.2 复杂校验，利用对象的形式
<body>
<div id="app">
<child :content="123"></child>
</div>
</body>
<script>
Vue.component('child',{
props:{
content : {
type:String,
required:false,
default:'default value',
validator:function(value){
reutrn (value.length>5)
}
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:"#app",
})
</script>
2.3 非props特性
父组件通过属性给子组件传递，但是子组件没有prosp这块内容，即子组件没有申明需要接收的内容，如果继续使用则报错，并且会在div显示
