vue组件学习(二)
2024-08-29 04:16:19
父子组件之间的数据传递,
父传给子: 直接在组件上传,如: (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的组件,父组件传了number=2的值给子组件
子组件通过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>
非props特性,其它就是给dom添加个自定义属性,显示在dom标签中,就是父组件给子组件传值,但子组合没有用props来接收,那就显示在dom中
给组件绑定事件,要加native 如: <coun :number="1" @click.native="handleNumber">
最新文章
- 《疯狂Java讲义》学习笔记——第2章 理解面向对象
- @media自适应宽度
- CentOS 6.6 安装 PHP Memcached 扩展
- Spring JdbcTemplate 的使用与学习(转)
- C# typeof()实例详解
- C# 之 Word光标移动 GoTo 方法
- Cannot proxy target class because CGLIB2 is not available. Add CGLIB to the class path or specify proxy interfaces
- Hibernate 报错org.hibernate.PropertyAccessException: IllegalArgumentException（已解决）
- python基础4
- percentiles of live data capture
- MYSQL—— char 与 varchar的区别！
- NFV-Bench A Dependability Benchmark for Network Function Virtualization Systems
- Django引入静态文件
- leetcode 155. Min Stack 、232. Implement Queue using Stacks 、225. Implement Stack using Queues
- javascript 获取鼠标在盒子中的坐标
- day10 十 函数、形参和实参
- oracle数据库基础功能
- mysql的sql语句的性能诊断分析
- 贪心算法——字典序最小问题，Saruman‘s Army
- React(0.13) 定义一个动态的组件