vue组件学习(二)
父子组件之间的数据传递,
父传给子: 直接在组件上传,如: (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为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">
vue组件学习(二)的更多相关文章
- vue组件学习(一)
1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...
- Vue组件学习
根据Vue官方文档学习的笔记 在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分. 注册组件 全局组件 语法如下,组件模板需要使用一个根标签包裹起来.data必须是 ...
- Vue组件学习（转载）
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Bootstrap基本类和组件学习二
一.联系方式:(自带鼠标的移动动画) 1.头文件CSS <link rel="shortcut icon" href="favicon.ico"> ...
- require.js 加载 vue组件 r.js 合并压缩
https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- 偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue小项目二手书商城：（一）准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
随机推荐
- 八：flask-重定向示例
现象:访问地址a,跳转到地址b,在flask中,使用redirect()来进行重定向 永久性重定向:301,多用于旧网址被废弃了,需要跳转到新网址访问 例如请求www.jingdong.com,会自动 ...
- VBA计算器的全部实现
我们将加入 除零逻辑 和 对话框提示. 后面 就很简单了~~~ 提供效果图跟 代码 代码示例 Sub 矩形1_Click() ' ' 矩形1_Click Macro ' 代码编辑 Dim number ...
- LeetCode算法题-Peak Index in a Mountain Array（Java实现）
这是悦乐书的第329次更新,第352篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第199题(顺位题号是852).如果以下属性成立,我们将数组A称为山: A.length ...
- PHP开发一个简单的成绩录入系统
预览界面 源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Sklearn评估器选择
- Pytorch迁移学习
环境: Pytorch1.1,Python3.6,win10/ubuntu18,GPU 正文 Pytorch构建ResNet18模型并训练,进行真实图片分类: 利用预训练的ResNet18模型进行Fi ...
- [转帖]JVM内存结构 VS Java内存模型 VS Java对象模型
JVM内存结构 VS Java内存模型 VS Java对象模型 https://www.hollischuang.com/archives/2509 Java作为一种面向对象的,跨平台语言,其对象.内 ...
- Docker网络大揭秘(单机)
docker网络官网 https://docs.docker.com/network/ Docker容器和服务如此强大的原因之一是您可以将它们连接在一起,或将它们连接到非Docker工作负载.Dock ...
- 2016青岛区域赛.Coding Contest(费用流 + 概率计算转换为加法计算)
Coding Contest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- Java中字符编码和字符串所占字节数 .
首 先,java中的一个char是2个字节.java采用unicode,2个字节来表示一个字符,这点与C语言中不同,C语言中采用ASCII,在大多数 系统中,一个char通常占1个字节,但是在0~12 ...