2.Vue子组件给父组件通信
子组件给父组件通信
如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的
子组件:
<template>
<div @click='upData'></div>
</template>
<script type="text/javascript">
export default {
data () {
return {
msg: 'Hello'
}
}
methods: {
upData () {
this.$emit('childData', this.msg) //this.msg传递的数据
}
}
}
</script>
<style type="text/css">
</style>
通过绑定事件upData,在里面使用$emit事件来注册childData事件,并且传递数值this.msg到父组件中
父组件:
<template>
<child @upData='changData' :msg='msg'></child> //监听子组件触发的事件,然后调用change方法
</template>
<script type="text/javascript">
export default {
data () {
return {
msg: ''
}
}
methods: {
changData (msg) {
this.msg = msg
}
}
}
</script>
<style type="text/css">
</style>
父组件通过监听子组件的childData的事件,来触发自己的绑定的changData事件,并将值获取复制给自己的msg
到这里就完成了子组件给父组件传递数据的过程
2.Vue子组件给父组件通信的更多相关文章
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- Vue.js组件的通信之子组件向父组件的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
随机推荐
- Kubernetes组件及网络基础
在前面的部分了解了Pod的创建删除 ,查看信息等.那么我们怎么去管理Pod呢?我们可以通过 ReplicationController 去管理维护 Pod. Replication Controlle ...
- CentOS8 下 Redis5.0.7 哨兵Sentinel 模式配置指南
下载Redis Redis下载链接 解压缩 tar -xzvf redis-5.0.7.tar.gz 编译安装 make和gcc依赖 可通过yum -y install gcc automake au ...
- 洛谷 P5663 加工零件 & [NOIP2019普及组] (奇偶最短路)
传送门 解题思路 很容易想到用最短路来解决这一道问题(题解法),因为两个点之间可以互相无限走,所以如果到某个点的最短路是x,那么x+2,x+4也一定能够达到. 但是如何保证这是正确的呢?比如说到某个点 ...
- 【vuejs面试题】务必熟知的vuejs面试题「务必收藏」
如果能帮到你,点个赞吧,务必熟知的vuejs面试题「务必收藏」 vuejs 基础必备 1.active-class 是哪个组件的属性?嵌套路由怎么定义 (1).active-class 是 vue-r ...
- centos7修改端口登陆
1 安装ssh服务 yum install -y openssh-server2 修改默认端口并保存 vim /etc/ssh/sshd_config 3 打开防火墙 service firewall ...
- 如何获取图片的base64编码
1.准备一张图片,比如1.gif 2.使用chrome浏览器,新建立一个窗口,然后将a.png拖动至浏览器窗口里面,打开控制台(检查),最后点击source 3.使用方法: 注意source获取的一串 ...
- 可视化缺失值的办法——R语言
在数据分析中,对缺失值的处理是很关键一步,一般用summary()函数 a<-c(,,,NA) B<-c("a","b","c" ...
- java程序员究竟应该掌握点什么
JAVA程序设计(基础部分) JAVA程序设计(专题)
- if [ $? -eq 0 ]; then该语句是什么含义?
某个shell脚本 # mkimage.sh echo "make and copy android images" ./mkimage.sh ]; then echo " ...
- fhq_treap || BZOJ 3224: Tyvj 1728 普通平衡树 || Luogu P3369 【模板】普通平衡树
题面:[模板]普通平衡树 代码: #include<cstdio> #include<cstring> #include<iostream> #include< ...