Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值：子组件通过$.emit()方法以事件形式向父组件发送消息传值；
使用步骤：
定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件；
准备获取数据：父组件com-a要获取子组件data中的height属性；
在子组件com-b中，需要用$.emit()方法将数据以事件的形式发送，$.emit('sendData', data, data…)，红色的部分事件名可自定义，数据可传递多个；
在父组件中使用子组件的地方 <com-b @自定义事件名='getData'></com-b> 监听子组件自定义的事件，并且在方法中获取数据；
在父组件data定义height属性； 在父组件中实现getData(height)方法，方法参数是子组件传递的数据，例如这里直有一个height，然后为this.height赋值； 赋值完毕后就可以使用了；
初始时在子组件中定义width和height
通过一个button来进行实现子组件向父组件进行传值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子组件向父组件传值</title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div>
<father-component ></father-component>
</div>
</body>
<template id="father-template">
<div>
<h2> 父组件</h2>
myData:<span>{{name}},
{{id}},
{{user.username}},{{age}}
</span><br />
childData:<span> width:{{width}}</span><br /><span>height:{{height}}</span> <hr />
<child-component :id='id' :age='age' @sent-event='getData'></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{name}},{{id}},{{user.username}},{{age}}</span><br />
myData:<span> width:{{width}}</span><br /><span>height:{{height}}</span><br />
<button @click="setData">向父组件传送数据</button> </div>
</template>
<script> new Vue({ data:{ }, components:{
"father-component":{ methods:{ getData(width,height){
this.width=width;
this.height=height;
}
},
data(){
return{
id:"",
name:'perfect', user:{ username:'博客园---perfect*',
password:'' },
age:,
width:,
height:
}
}, template:'#father-template', components:{
"child-component":{ methods:{
setData(){
console.log(this);//这里的this指的是child-component实例
this.$emit('sent-event',this.width,this.height);
}
},
data(){ return{
width:,
height:
}
}, template:'#child-template', props:{ name:{
type:String,
//required:true,//必须进行传值 default:'perfect*'//定义一个默认值
},
id:[Number,String],
user:{
type:Object,
default:function(){
return {username:'perfect***',password:''}
}
}, age:{
type:Number,
validator: function (value) {
return value>=;
} }
}
}
}, }
} }).$mount('div');
</script>
</html>
Vue 组件&组件之间的通信 之 子组件向父组件传值的更多相关文章
- layui type:2 iframe子页面向父页面传值
需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...
- vue子组件的样式没有加scoped属性会影响父组件的样式
scoped是一个vue的指令,用来控制组件的样式生效区域,加上scoped,样式只在当前组件内生效,不加scoped,这个节点下的样式会全局生效. 需要注意的是:一个组件的样式肯定是用来美化自己组件 ...
- vue组件样式添加scoped属性之后，无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- vue 子页面,向父页面 传值...
子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...
- vue组件父子之间相互通信案例
- Vue.js如何获得兄弟元素，子元素，父元素（DOM操作）
我不是代码的生产者,我只是知识的搬运工. 戳这
- WinFrom子窗体向父窗体传值
父窗框mainForm;子窗体childForm,利用事件进行传值 在子窗体中的操作: public event EventHandler accept;public string value; pr ...
- MVC弹出子页面向父页面传值
实现思路是使用js在父子页面间传值 视图一代码,父页面 @{ ViewBag.Title = "Index"; } <script type="text/javas ...
- layui 子页面向父页面传值
实现功能:单击确定按钮将选中的id传到父页面并关闭当前子页面. 首先在父页面定义一个函数: //分配产品 function ChooseAdidValues(v) { if (v != "& ...
随机推荐
- atom编辑器安装插件报错。。
Checking for native build tools failed gyp info it worked if it ends with ok gyp info using node-gyp ...
- PDF在线解除密码的方法是什么
大家在网上下载一些关于PDF文件的时候通常会发现有的PDF文件是有密码的,有密码的文件通常是不可以被转换的,这个时候我们就需要将其密码解除掉,这样后期不仅方便阅读也方便了PDF文件的转换. 操作工具: ...
- Quartz任务调度
狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! Quartz任务调度 课程目标 : 了解Quartz框架 : 任务(Job) 触发器(Trig ...
- python 面试小基础
1. py2和py3的区别? 2. 进程 / 线程 / 协程的区别?
- pycharm 激活方法
方法一: 服务器激活 pycharm 安装: https://www.cnblogs.com/pyyu/articles/9210171.html 方法二: 密钥激活 pycharm 获取激活码 (密 ...
- oracle多行合并一行
以上图为例 执行SQL语句: select d.group_id,to_char(wm_concat(d.tag)) from Imglib_Group_Tag d where d.group_id= ...
- Linux系统（四）LVS集群负载均衡NAT模式
序言 提到LVS,就从章文嵩博士开始吧,反正也不知道如何下笔来写这一篇.章大博士,读博时候创建这个lvs软件项目,但是他提倡开源精神,在用户的建议和反馈中,这个花了他两周时间开发的开源软件不断得到改建 ...
- 3.2.1 SpringMVC入门
一. SpringMVC入门 1. MVC介绍 MVC全名 是Model View Controller, 是模型(model) - 视图(view) - 控制器(controller) 的缩写, 它 ...
- 软件测试第二次作业：初识JUNIT单元测试方法
软件测试有很多分类,从测试的方法上可分为:黑盒测试.白盒测试.静态测试.动态测试 从软件开发的过程分为:单元测试.集成测试.确认测试.验收.回归等. 在众多的分类中,与开发人员关系最紧密的莫过于单 ...
- Xamarin Forms error MSB6006: “java.exe”已退出，代码为 2 解决办法
https://vicenteguzman.mx/2017/08/20/error-java-exe-exited-with-code-2-xamari-forms/