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 父组件调用子组件的方法 我们从 ...
随机推荐
- typescript是否可以直接编译执行?
算是个有趣的小问题,由于必须依赖node.js,typescript理论上是不能不转成js直接运行的.
- Codeforces 1262D Optimal Subsequences(BIT+二分)
首先比较容易想到肯定是前k大的元素,那么我们可以先对其进行sort,如果数值一样返回下标小的(见题意),接下里处理的时候我们发现需要将一个元素下标插入到有序序列并且需要访问第几个元素是什么,那么我们可 ...
- PythonDay06
第六章 今日内容 小数据池 深浅拷贝 集合 小数据池 == is id == 判断两个值是否相等 is --- 是 判断两个值的内存地址是否相等 代码块:一个py文件,一个函数,一个模块,终端中每一行 ...
- 如何设置一个App的缓存机制
在手机应用程序开发中,为了减少与服务端的交互次数,加快用户的响应速度,一般都会在iOS设备中加一个缓存的机制,前面一篇文章介绍了iOS设备的内存缓存,这篇文章将设计一个本地缓存的机制. 功能需求 这个 ...
- MySQL索引优化与分析(重要)
建表SQL CREATE TABLE staffs ( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR (24) NULL DEFAULT '' COM ...
- Java基础学习(2)
Java基础学习(二) 面向对象 对象:客观存在的事物 面向对象:人具体关注的事物的某些信息 类:是模子,确定对象会拥有的特征(属性)和行为(方法) 对象的属性:对象具有的各种特征 对象的方法:对象能 ...
- 四、续绑定SignaIR的用户管理-(添加好友和消息盒子)
一.聊天消息表(普通消息,申请消息,群聊消息) CREATE TABLE MSG_INFO ( MSG_Id INT PRIMARY KEY AUTO_INCREMENT, -- 消息标识 MSG_T ...
- CCPC-Wannafly Winter Camp Day1 (Div2, onsite) - I 起起落落
题目描述 无聊的wlswls正在观察某个商品的价格,wlswls一共观察了nn天,每天这个商品都会有一个价格p_ipi. 定义一个长度为2m+1(3\leq2m+1\leq n)2m+1(3≤2m+ ...
- mysql merge引擎分表
---------------------创建表一--------------------------------------DROP TABLE a1;CREATE TABLE `a1` ( `id ...
- CCF201412-2 Z字形扫描 java(100分)
试题编号: 201412-2 试题名称: Z字形扫描 时间限制: 2.0s 内存限制: 256.0MB 问题描述: 问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag ...