前端-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 ...
随机推荐
- GO语言常用标准库01---strings包
package main import ( "fmt" "strings" ) func main031() { fmt.Printf("字符形式:% ...
- JAVA并发(6)-并发队列ArrayBlockingQueue
本文讲ArrayBlockingQueue 1. 介绍 一个基于数组的有界阻塞队列,FIFO顺序.支持等待消费者和生产者线程的可选公平策略(默认是非公平的).公平的话通常会降低吞吐量,但是可以减少可变 ...
- 使用adb命令在模拟器安装apk
1.adb connect 127.0.0.1:7555 连接网易模拟器地址2.adb devices -L 查看有几个连接端口地址3.执行推送配置文件 命令 adb push 文件 路径
- httprunnermanager安装和配置
服务端安装mysql数据库(建议5.7以上的,mysql安装教程),设置utf-8编码,创建对应的数据库,设置好相应的用户名,密码,然后启动mysql 下载httprunnermanager 安装ht ...
- 分布式Jmeter压测机的部署
部署 1.分布式配置 Master机Jmeter安装目录下/bin/jmeter.properties remote_hosts修改为slave压力机的IP 如 remote_hosts=10.0.4 ...
- 11张流程图帮你搞定 Spring Bean 生命周期
在网上已经有跟多Bean的生命周期的博客,但是很多都是基于比较老的版本了,最近吧整个流程化成了一个流程图.待会儿使用流程图,说明以及代码的形式来说明整个声明周期的流程.注意因为代码比较多,这里的流程图 ...
- Luat Inside | 致敬经典，使用Air724UG制作简易贪吃蛇
作者简介: 打盹的消防车--活跃于Luat社群的新生代全能开发者,东北小伙儿爽朗幽默.好学敏思,更是实力行动派.幼年曾手握火红炽铁而后全然无恙,堪称魔幻经历:如今热衷于各类嵌入式软硬件研究,快意物联江 ...
- 「模拟8.17」star way to heaven(并查集，最小生成树)
80分打法 首先二分最后答案,答案即为r,可看作以每个k为圆心r为半径的圆 我们进行并查集维护,维护相交的圆的边界 最后判断是否存在圆将上下边界覆盖,如有证明不行 1 #include<iost ...
- 1、JVM体系结构
1.JVM跨语言的平台 随着java7的正式发布,java虚拟机的设计者们通过JSR-292规范基本实现在java虚拟机平台上运行非java语言编写的程序. java虚拟机根本不关心运行在其内部的程序 ...
- JavaScript与服务端进行数据交互的方式
XMLHttpRequest XHR是项古老的技术,不同的浏览器厂商对其实现方式不同,例如有些浏览器只支持onload事件处理器,有些只支持onreadystatechange事件处理器. 发送Get ...