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数据) 组件 ...
随机推荐
- TCP/IP 网络模型
前言 互联网是怎么构成的,又是怎么运作的?什么是 TCP/IP 网络?为什么远隔万里的计算机可以互相通信?计算机网络作为 IT 行业的基石,是工程师永远绕不开的话题. 计算机网络的分层体系结构 计算机 ...
- Golang基础(3)：数组，切片和字典
一:数组 数组是一个具有相同类型元素,固定长度的有序集合,一般定义如下:var x [5]int表示数组是一个整数型数组,长度为5数组的几种定义方式 a: var来定义数组,然后依次赋值 packag ...
- python接口自动化：requests+ddt+htmltestrunner数据驱动框架
该框架分为四个包:xc_datas.xc_driven.xc_report.xc_tools. xc_datas:存放数据,xc_driven:存放执行程序,xc_report:存放生成的报告,xc_ ...
- Redis为什么不能使用一主一从哨兵
哨兵机制 识别挂掉的主节点 quorum(法定人数) 是判定主节点不能访问所需要的最少哨兵数量 执行失效备援perform a failover 其中一个哨兵需要被选为救援的领导,并被授权执行救援,而 ...
- Java第五周作业+总结
实验三 String类的应用 实验目的 掌握类String类的使用: 学会使用JDK帮助文档: 实验内容 1.已知字符串:"this is a test of java".按要求执 ...
- 第九周课程总结&实验报告7
实验任务详情: 完成火车站售票程序的模拟.要求:(1)总票数1000张:(2)10个窗口同时开始卖票:(3)卖票过程延时1秒钟:(4)不能出现一票多卖或卖出负数号票的情况. 实验代码: package ...
- [DS+Algo] 010 二叉树的遍历
二叉树遍历 深度优先 一般用递归 一些名词 遍历方式 英文 先序 Preorder 中序 Inorder 后序 Postorder 广度优先 一般用队列 Python 代码示例 class Node( ...
- [转帖]kafka入门：简介、使用场景、设计原理、主要配置及集群搭建
kafka入门:简介.使用场景.设计原理.主要配置及集群搭建 http://www.aboutyun.com/thread-9341-1-1.html 还没看完 感觉挺好的. 问题导读: 1.zook ...
- C#基础篇之C#和 .Net框架的概念和运行原理
一.微软平台的发展史 二..Net框架包含的东西 1.名词解释 BCL:基类库(Base Class Library)系统和底层提供的最基本的类库 CLR:公共语言运行时(Common Languag ...
- select count(*) 底层到底干了啥？
作者:贾春生,http://dwz.win/myg SELECT COUNT( * ) FROM TABLE 是个再常见不过的 SQL 需求了. 在 MySQL 的使用规范中,我们一般使用事务引擎 I ...