前端-Vue基础3（父子组件交互）
1、子组件往父组件传值
点击子组件的值，子组件自增，父组件的值也跟着自增
通过：this.$emit('change')方法向父组件暴露事件，在子组件中引用，可以调用父组件的方法
点击子组件触发click事件，调用子组件的add方法
子组件的add方法触发了父组件的事件，调用了父组件的changeAdd方法
<body>
<div id="app">
<!-- 调用父组件的方法-->
<number @change="countAdd"></number>
<number @change="countAdd"></number>
<div>父组件--<span>{{count}}</span></div> </div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
template:'<div>子组件--<span @click="add">{{num}}</span></div>',
data:function () {
return{
num:0
}
},
methods:{
add:function () {
this.num++
this.$emit('change'.this.num)//向父组件触发事件
}
}
}) new Vue({
el:'#app',
data:{
count:0
},
methods:{
countAdd:function (num) {
this.count++
console.log(num)
}
}
})
</script>
</body>
2、父组件向子组件单向传值
父组件向子组件传值，存在单向数据流
父组件可以随意向子组件传值，但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
<body>
<div id="app">
<!-- 调用父组件的方法-->
<number :num2="number2" num3="10"></number>
<number :num2="number2" num3="10"></number> </div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:['num2','num3'],
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
}) new Vue({
el:'#app',
data:{
number2:99
}
})
</script>
</body>
2.1 props
props可以是数组
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:[num2,num3],
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
})
也可以是字典
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:{
'num2':{
type:[Number,String],//数据类型
default:200,//默认值
required:true//不能和default连用
}
},
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
})
前端-Vue基础3（父子组件交互）的更多相关文章
- Vue基础：子组件抽取与父子组件通信
在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- [前端] VUE基础 (9) (element-ui、axios、Vuex)
一.element-ui的使用 官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue ...
- vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template> <div id="app"> <input type="butto ...
随机推荐
- .NET Core HttpClient请求异常详细情况分析
前言 最近项目上每天间断性捕获到HttpClient请求异常,感觉有点奇怪,于是乎观察了两三天,通过日志以及对接方沟通确认等等,查看对应版本源码,尝试添加部分配置发布后,观察十几小时暂无异常情况出现, ...
- Go基础结构与类型07---简单的数据类型转换
package main import ( "fmt" "strconv" ) /* 类型转换强化 整型和浮点型可以直接强制转换 字符串和数值的转换用strco ...
- 摄像头与毫米波雷达（Radar）融合
摄像头与毫米波雷达(Radar)融合 Input: (1)图像视频分辨率(整型int) (2)图像视频格式 (RGB,YUV,MP4等) (3)毫米波雷达点云信息(点云坐标位置x,y,浮点型float ...
- 使用现代C++如何避免bugs（上）
使用现代C++如何避免bugs(上) How to avoid bugs using modern C++ C++的主要问题之一是拥有大量的构造,它们的行为是未定义的,或者程序员只是意想不到的.在各种 ...
- H265与ffmpeg改进开发
H265与ffmpeg改进开发 1. Introduction KSC265是集编码.解码于一体的H.265编解码软件,完全遵循H.265协议标准.符合H.265编码规范的视频都可以通过KSC265进 ...
- 孟老板 ListAdapter封装, 告别Adapter代码 (上)
BaseAdapter封装(一) 简单封装 BaseAdapter封装(二) Header,footer BaseAdapter封装(三) 空数据占位图 BaseAdapter封装(四) PageHe ...
- 【Python报错】RuntimeError: DataLoader worker (pid(s) 9764, 15128) exited unexpectedly
batch_size = 2# 256 def get_dataloader_workers(): #@save """使用4个进程来读取数据.""& ...
- JAVA微服务应用（1）--SpringBoot中的REST API调用（学习笔记）
好长时间没有写学习小结了,最近宁正好看了小马哥的微服务系列之<Spring Boot>系列,颇有收获,并且公司也布置一个课题就是关于Spring中的REST API调用.于是乎回归本行,再 ...
- Java必学MySQL数据库应用场景
Java教程分享Java必学之MySQL数据库应用场景,在当前的后台开发中,MySQL应用非常普遍,企业在选拔Java人才时也会考察求职者诸如性能优化.高可用性.备份.集群.负载均衡.读写分离等问题. ...
- js笔记13
1.js操作css样式 div.style.width="100px".在div标签内我们添加了一个style属性,并设定了width值,这种写法会给标签带来大量的style属性, ...