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数据) 组件 ...
随机推荐
- Delphi XE2 之 FireMonkey 入门(43) - 控件基础: TStringGrid、TGrid
Delphi XE2 之 FireMonkey 入门(43) - 控件基础: TStringGrid.TGrid TStringGrid.TGrid 都是从 TCustomGrid 继承; 区别有:1 ...
- 如何比较两个txt文件内容的细微差别
如何比较两个txt文件内容的细微差别 https://jingyan.baidu.com/article/19020a0a1dd04a529c284272.html 听语音 | 浏览:3500 | 更 ...
- firewalld无法使用解决
一.安装完Python3.6.5后无法使用firewalld解决 解决:需要把/usr/sbin/firewalld./usr/bin/firewall-cmd 的头部内容改为原来的 pyton2.7 ...
- Lua增加一个节点到文件中
新建一个文件touch /etc/config/ddns 增加一个节点到文件中uci set ddns.newadd=config <config>:即配置文件,如ddns,ipv6等&l ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
- Linux进程状态——top，ps中看到进程状态D，S，Z的含义
在top和ps命令中有一列显示进程状态,分别有如下值: 值 含义 S 进程处于interruptable sleep状态 D 进程处于Uninterruptable sleep状态 R 进程处于运行状 ...
- “AIIA”杯-国家电网-电力专业领域词汇挖掘
十一之前一直在做“电力领域的词典构建”任务,今天也去聆听了前五支队伍的报告,现结合这段时间来的项目经历,写一下自己的若干心得. 电力领域的词典构建——方法1(非监督学习) 在电力领域词典构建心得1.0 ...
- Java——LinkedList使用Demo
package list; import java.util.Iterator; import java.util.LinkedList; public class LinkedListDemo { ...
- 安装libpng库
一. 安装libpng库前需要先安装zlib库,libpng库依赖zlib库 1.1. zlib库安装 1.1.1. 下载地址:http://www.zlib.net/ 1.1.2. 解压后得到zli ...
- [BZOJ 3771] Triple(FFT+容斥原理+生成函数)
[BZOJ 3771] Triple(FFT+生成函数) 题面 给出 n个物品,价值为别为\(w_i\)且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? 分析 这种计数问题容易想到生成 ...