vue组件学习(二)
父子组件之间的数据传递,
父传给子: 直接在组件上传,如:
子组件通过props:['number'] 接收;
子传给父组件: 通过$emit('change',参数),change可以任意命名,向父组件暴露数据接口
父组件通过监听"change"然后调用 一个方法获取到的参数和值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue组件学习~父子间的数据传递</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<coun :number="1" @inc="handleNumber"></coun>
<coun :number="3" @inc="handleNumber"></coun>
<div>总计: {{total}}</div>
</div>
<script>
var counter = {
props: ['number'],
data:function () {
return {
mynumber: this.number, //单向数据流,子组件不能直接改父组件的数据,保存到子组件变量中修改
}
},
template: '<div @click="handeClick">{{mynumber}}</div>',
methods: {
handeClick:function () {
this.mynumber += 2; // 每次点击加2
this.$emit('inc',2);// 把每次改变的数字传出去给父组件
}
}
}
var vm = new Vue({
el: '#root',
data:{
total: 4,//暂时写死,可能用计算属性来计算
},
components: {
coun: counter
},
methods: {
handleNumber:function (number) {
this.total += number
}
}
})
</script>
</body>
</html>
2, 组件参数校验与非props特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue组件学习~父子间的数据传递</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<coun :number="1" @inc="handleNumber"></coun>
<coun :number="3" @inc="handleNumber"></coun>
<div>总计: {{total}}</div>
</div>
<script>
var counter = {
// props: ['number'],
//对父组件传进来的参数进行验证
props: {
// 验证传进来的number为字符串类型
number: String
},
//对父组件传进来的参数进行验证
props: {
// 验证传进来的number为数字类型
number: String
},
props: {
// 验证传进来的number为数字类型和字符串类型
number: [Number,String]
},
props: {
// 验证传进来的number为数字类型和字符串类型
number: {
type: [Number,String],
required: true, // true为必传
default: '如果没有传,就用默认值',//默认值
validator: function (value) {//自定义校验, value为传进来 的值
return (value.length > 5);// 对传进来的参数长度限制
}
},
},
// 展示了props的多种用法,使用其中之一就好
data:function () {
return {
mynumber: this.number, //单向数据流,子组件不能直接改父组件的数据,保存到子组件变量中修改
}
},
template: '<div @click="handeClick">{{mynumber}}</div>',
methods: {
handeClick:function () {
this.mynumber += 2; // 每次点击加2
this.$emit('inc',2);// 把每次改变的数字传出去给父组件
}
}
}
var vm = new Vue({
el: '#root',
data:{
total: 4,//暂时写死,可能用计算属性来计算
},
components: {
coun: counter
},
methods: {
handleNumber:function (number) {
this.total += number
}
}
})
</script>
</body>
</html>
