今天主要是了解Vue框架的细节,父子组件的传值过程,以及传值过程中的参数校验。看完视频后。理解了代码的结构,能够自主的完成代码的敲打,感觉熟练了一点。同时在过程中的小bug,及时改正。下面说一下三点内容。
4-1,模板组件细节知识点
(1)H5中table -tbody tr ,使用is属性:is=row,
(2)根组件中data中可以是对象,子组件data中必须是个函数,返回该对象。
is使用解决的是是Dom层结构符合H5的语法结构。
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component("row",{
data:function(){
return {
content:"热爱 data",
}
},
template:'<tr><td>{{content}}</td></tr>'
})
var vm = new Vue({
el:"#root",
})
</script>
ref,组件中加上ref,获取到组件的引用,子组件通过事件监控传递数据到父组件。实现加法
这里添加ref可以获取到<counter>的属性、
<div id="root">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component("counter",{
data:function(){
return {
number:0
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number++;
//子组件受父组件监听
this.$emit('change')
}
}
})
var vm = new Vue({
el:"#root",
data:{
total:0,
},
methods:{
handleChange:function(){
this.total=this.$refs.one.number + this.$refs.two.number;
//alert(this.$refs.one.number);
}
}
})
</script>
4-2父子组件之间的传值。
子组件中props:['count']接收父组件的参数对象。
这里子组件向父组传值采用事件监控,传递变化参数2,没有引用ref
div id="root">
<counter @change="changeClick" :count='3'></counter>
<counter @change="changeClick" :count='2'></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['count'],//接收父组件中的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",
components:{
counter:counter,
},
data:{
total:5
},
methods:{
changeClick:function(step){
//this.total=this.$refs.one.number+this.$refs.two.number
console.log(step);
this.total=step+this.total;
}
}
})
</script>
4-3组件参数校验:
限定父组件传到子组件可以使数字或者字符串,对象。
props:{
count:[Number,String]
},可以限制传入的参数是数字或者字符串
props:{
count:{
type:String,
// required:true,判断是否类型正确
//default:"lvzekun",默认参数
validator:function(value){设置校验器,如字符串长度
return (value.length>5)
}
}
},
注意事项;$refs的使用,子组件中data:{},必须是函数,返回对象
父组件传值,子组件props接收子组件,定义新对象用于参数变化,设置监听事件$emit(),父组件监听事件,返回函数处理。