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( ...
随机推荐
- lesson12Homework
package StringPractice; public class arrayTest { //1. 把A数组的前5个元素复制到B数组中. public static void main(Str ...
- O031、Start Instance 操作详解
参考https://www.cnblogs.com/CloudMan6/p/5470723.html 本节将通过日志文件分析 instance start 的操作过程,下面是 start inst ...
- 微信小程序富文本
<div class="weui-panel__bd pad-all fs13 " > <rich-text nodes="{{detail.conte ...
- 乐观锁之版本号机制和CAS
---恢复内容开始--- 乐观锁:每次去拿数据的时候,都认为别人不会修改,不会加锁,但在更新的时候会去判断一下,此期间别人有没有更新数据,版本号机制和CAS算法就用到乐观锁,参考了https://bl ...
- 招商银行网银在Mac上装了插件仍然无法登录
1 装完插件后,在登录页面重新载入插件,再次打开
- 【异常】The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
1 详细异常信息 The last packet sent successfully to the server was milliseconds ago. The driver has not re ...
- cubase 的 CC控制器使用
- Optimization Algorithms
1. Stochastic Gradient Descent 2. SGD With Momentum Stochastic gradient descent with momentum rememb ...
- TCP/IP——内网IP
版权声明:本文系博主原创文章,转载或引用请注明出处. 1)背景 REC 1918留出了3块IP地址空间(1个A类地址段,16个B类地址段,256个C类地址段)作为私有的内部使用的地址. 在这个范围内的 ...
- Change :hover CSS properties with JavaScript
I need to find a way to change CSS :hover properties using JavaScript. For example, suppose I have t ...