Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门
子组件向父组件传值：子组件通过$.emit()方法以事件形式向父组件发送消息传值；
使用步骤：
1、定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件；
2、准备获取数据：父组件com-a要获取子组件data中的height属性；
3、在子组件com-b中，需要用$.emit()方法将数据以事件的形式发送，$.emit('sendData', data, data…)，红色的部分事件名可自定义，数据可传递多个；
4、在父组件中使用子组件的地方 <com-b @自定义事件名='getData'></com-b> 监听子组件自定义的事件，并且在方法中获取数据；
5、在父组件data定义height属性；
6、在父组件中实现getData(height)方法，方法参数是子组件传递的数据，例如这里直有一个height，然后为this.height赋值；
7、赋值完毕后就可以使用了；
Learn
一、子组件向父组件传值
目录结构
一、子组件向父组件传值
在子组件中初始化数据
"child-component" : {
template : "#child-template",
methods : {
sendData(){
console.log(this);
this.$emit('send-event', this.width, this.height);
}
},
data(){
return {
width : 50,
height : 100
}
},
props : {
name : {
type : String,
//required : true,
default : "Garydef"
},
id : [Number, String],
user : {
type : Object,
default : function(){
return {username : 'lain', password : '123123'};
}
},
age : {
type : Number,
validator : function(value){
return value >= 0;
}
}
}
}
在子组件中添加<button>按钮，并绑定sendData点击事件，sendData函数在子组件中已经绑定
<button @click="sendData">向父组件发送数据</button>
父组件中直接获得子组件id和age属性值
<child-component :id="id" :age="age" @send-event="getData"></child-component>
<template id="father-template">
<div>
<h1>father component</h1>
myData :
<span>
{{name}} ,
{{id}} ,
{{user.username}} ,
{{age}}
</span><br />
childData :
<span>
{{width}},
{{height}}
</span><hr />
<child-component :id="id" :age="age" @send-event="getData"></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData :
<span>
{{name}} ,
{{id}} ,
{{user.username}},
{{age}}
</span><br />
myData :
<span>
{{width}},
{{height}}
</span><br />
<button @click="sendData">向父组件发送数据</button>
</div>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
myData :
<span>
{{name}} ,
{{id}} ,
{{user.username}} ,
{{age}}
</span><br />
childData :
<span>
{{width}},
{{height}}
</span><hr />
<child-component :id="id" :age="age" @send-event="getData"></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData :
<span>
{{name}} ,
{{id}} ,
{{user.username}},
{{age}}
</span><br />
myData :
<span>
{{width}},
{{height}}
</span><br />
<button @click="sendData">向父组件发送数据</button>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : { },
components : {
"father-component" : {
methods : {
getData(width, height){
this.width = width;
this.height = height;
}
},
data(){
return {
id : '01',
name : 'Gary',
user : {
username : 'userGary',
password : 'pw123'
},
age : 18,
width : 0,
height : 0
}
},
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
methods : {
sendData(){
console.log(this);
this.$emit('send-event', this.width, this.height);
}
},
data(){
return {
width : 50,
height : 100
}
},
props : {
name : {
type : String,
//required : true,
default : "Garydef"
},
id : [Number, String],
user : {
type : Object,
default : function(){
return {username : 'lain', password : '123123'};
}
},
age : {
type : Number,
validator : function(value){
return value >= 0;
}
}
}
}
}
}
}
}).$mount("#GaryId"); </script>
</html>
Gary_childToFather.html
Vue_(组件通讯)子组件向父组件传值的更多相关文章
- vue 子组件把数据传递给父组件
<div id="app"> <child v-on:drop='parent'></child> //这里v-on:drop="pa ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- vue 子页面,向父页面 传值...
子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...
- layui type:2 iframe子页面向父页面传值
需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...
- vue $emit 父组件与子组件之间的通信（父组件向子组件传参）
1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...
- reac——父组件向子组件传递值，子组件何时能同步获得父组件改变后的值
//这里是父组件的代码:export default class HeaderCom_son extends React.Component { constructor(props) { super( ...
随机推荐
- Fabric的简介
1,初识fabric 1,什么是fabric fabric是一个Python的库和命令行工具,用来提高基于SSH的应用部署和系统管理的效率. 简单来说: (1)一个让你通过命令行执行无参数python ...
- Winform 5种皮肤小结（内含丰富的下载实例）
软件界面就是指软件中面向操作者而专门设计的用于操作使用及反馈信息的指令部分. 优秀的软件界面有简便易用,突出重点,容错高等特点. 1.东日IrisSkin 使用IrisSkin只能是对单一的控件重绘 ...
- 大数据测试类型&大数据测试步骤
一.什么是大数据? 大数据是一个大的数据集合,通过传统的计算技术无法进行处理.这些数据集的测试需要使用各种工具.技术和框架进行处理.大数据涉及数据创建.存储.检索.分析,而且它在数量.多样性.速度方法 ...
- Js 参数乱码
在前台,对URL的中文参数执行两次encodeURI: 序列化 var param = encodeURI(encodeURI("中文")); 反序列化 decodeURI($. ...
- opencv 模板匹配， 已解决模板过大程序不工作的bug
#include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv ...
- haproxy实现ssl套接字加密
概述 如果你的应用使用SSL证书,则需要决定如何在负载均衡器上使用它们. 单服务器的简单配置通常是考虑客户端SSL连接如何被接收请求的服务器解码.由于负载均衡器处在客户端和更多服务器之间,SSL连接解 ...
- MYSQL 创建数据库以及表
创建数据库,表 创建一个数据库,再在数据库下创建一个或多个表,不难,记不住的同学可以直接copy,慢慢的用会即刻,懂的同学请看代码,没有太多基础的同学,除了看代码,请看最下方的知识点 创建数据库: C ...
- Flutter 之页面状态保持
一般情况下,我们使用tab切换的时候希望操作完毕之后,能够记住上个页面的状态, 但是使用Flutter的BottomNavigationBar的 时候默认是不记录页面状态的,即切换页面会导致重新加载. ...
- 3.Struts2-Result
注: 1.在struts.xml文件中使用include标签 可以将另外一个xml文件包含进struts.xml文件中,如: <struts> <constant name=&quo ...
- head pose estimation
opencv:帖子中介绍了算法原理和opencv估计姿态的代码 https://www.learnopencv.com/head-pose-estimation-using-opencv-and-dl ...