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( ...
随机推荐
- -bash: fork: retry: 没有子进程
今天遇到一个问题 -bash: fork: retry: 没有子进程 解决方法 设置各linux 用户的最大进程数,下面我把某linux用户的最大进程数设为10000个: ulimit -u 10 ...
- # 风险定性(Qualitative)分析
1. 从一个给教师打分的设计表说起 我们参加一个培训课程,一般在培训结束之后,培训机构一般都会分发一份培训师培训效果反馈表,用于评价其讲师的培训能力的强弱. 如果是一家没有什么经验的培训机构设计的反馈 ...
- CF516D Drazil and Morning Exercise
cf luogu 首先每个点到最远点的距离可以预处理出来,这个距离显然是这个点到树直径两端点的最大值.把那个距离记为\(d_i\),然后从小到大枚举\(d_i\),并强制它为最大的\(d_i\),那么 ...
- echart tooltip问题（鼠标放上去显示所有和显示当个）
先看效果 两种方式只要修改一下 echat option里面tooltip的属性即可 第一种: tooltip : { show: true, trigger: 'item' // trigger: ...
- vue-cli实现原理
分析:https://kuangpf.com/vue-cli-analysis/create/basic-verification.html vue-cli-service :https://blog ...
- 通俗易懂的axios
get的两种请求: methods:{ //axios.get的发送参数有两种,两个ajax请求函数都可实现 sendGetByStr(){ //1.get通过直接发字符串拼接 axios.get(` ...
- Java学习笔记【十三、多线程编程】
概念 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特别的形式,但多线 ...
- linux使用nginx配置web服务器
环境: CenterOS 7 1.安装nginx之前先安装nginx所需的依赖包 yum -y install zlib zlib-devel openssl openssl-devel pcre p ...
- onItemSelected 获取选中的 信息 3种方法
@Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) ...
- Linq表达树（固定参数）
这篇博客只能用来批判因为我刚刚学习linq对它了解只有简单的linq to sql 的语句所以来写这个博客只能说是班门弄斧了,看的下去的话就坚持看吧. 在网上看了别人的文章目前水平有限借鉴别人的思想吧 ...