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( ...
随机推荐
- 进阶Java编程(2)线程常用操作方法
线程常用操作方法 多线程的主要操作方法都在Thread类中定义的. 1,线程的命名和取得 多线程的运行状态是不确定的,那么在程序的开发之中为了可以获取到一些需要使用到的线程就只能依靠线程的名字来进行操 ...
- mongo（一）
入门文章地址:https://blog.csdn.net/muguli2008/article/details/80591256 按下面文件创建好文件下,然后执行下面的命令 mongod --port ...
- React学习——通过模态框中的表单，学习父子组件之间传值
import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...
- ubuntu 共享WIFI并分享主机的代理服务
背景是这样的: 公司内的主机访问外网需要通过一个HTTP代理服务器,主机ubuntu共享wifi给手机使用的时候需要在手机上配置一个代理才能访问互联网. 我觉得这样比较麻烦,所以想在主机上直接把共享w ...
- svn+jenkins自动部署
需求:项目经理想要将原型图修改完后直接发布 前置条件: 已经有了svn服务器,并正常使用 已经有了jenkins服务器,之前搭建的gitlab+jenkins, 如需搭建jenkins,参考 http ...
- 怎么处理系统蓝屏后提示代码0x000000d1的错误？
电脑开机有时会出现蓝屏,导致蓝屏的原因有很多,每种错误都有不同的代码.下面就来和大家分享一下电脑开机蓝屏出现0x000000d1错误代码是什么原因?我们又该怎么去解决这个问题. 电脑开机蓝屏出现0x0 ...
- apache启动错误 AH00072: make_sock: could not bind to address [::]:443 windows系统端口/进程查看
1. netstat -ano|findstr " 2. tasklist|findstr "
- 03：Java基础语法（二）
Java基础语法 Java运算符 算术运算符 运算符是一种特殊的符号,用以表示数据的运算.赋值和比较等.1.操作数:参与运算的数据 称为操作数.2.表达式:运算符和操作数的整体 称为表达式.单独的一个 ...
- JLINK驱动版本更换
https://www.segger.com/downloads/jlink/JLink_Windows_V644b.exe 官网版本 Jlink的版本目录C:\Keil_v5\ARM\Segger\ ...
- C++二叉树前中后序遍历（递归&非递归）统一代码格式
统一下二叉树的代码格式,递归和非递归都统一格式,方便记忆管理. 三种递归格式: 前序遍历: void PreOrder(TreeNode* root, vector<int>&pa ...