正文

Vue 组件&组件之间的通信 之 子组件向父组件传值

IP云
IP云V管理员/3 阅读
06/20
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

子组件向父组件传值：子组件通过$.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 组件&组件之间的通信 之 子组件向父组件传值的更多相关文章

  1. layui type&colon;2 iframe子页面向父页面传值

    需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...

  2. vue子组件的样式没有加scoped属性会影响父组件的样式

    scoped是一个vue的指令,用来控制组件的样式生效区域,加上scoped,样式只在当前组件内生效,不加scoped,这个节点下的样式会全局生效. 需要注意的是:一个组件的样式肯定是用来美化自己组件 ...

  3. vue组件样式添加scoped属性之后，无法被父组件修改。或者无法在本组件修改element UI样式

    在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...

  4. vue 子页面&comma;向父页面 传值&period;&period;&period;

    子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...

  5. vue组件父子之间相互通信案例

  6. Vue&period;js如何获得兄弟元素，子元素，父元素（DOM操作）

    我不是代码的生产者,我只是知识的搬运工. 戳这

  7. WinFrom子窗体向父窗体传值

    父窗框mainForm;子窗体childForm,利用事件进行传值 在子窗体中的操作: public event EventHandler accept;public string value; pr ...

  8. MVC弹出子页面向父页面传值

    实现思路是使用js在父子页面间传值 视图一代码,父页面 @{ ViewBag.Title = "Index"; } <script type="text/javas ...

  9. layui 子页面向父页面传值

    实现功能:单击确定按钮将选中的id传到父页面并关闭当前子页面. 首先在父页面定义一个函数: //分配产品 function ChooseAdidValues(v) { if (v != "& ...

随机推荐

  1. 第十六章 PHP 操作MySQL

    学习要点:1.PHP 连接到MySQL2.增删改查3.其他常用函数 如果你已经具有了使用PHP.SQL 和MySQL 的丰富经验,现在就可以把所有这些技术组合在一起.PHP 与MySQL 之间稳固的集 ...

  2. java 获取请求客户端的真实IP地址

    转载自:http://leiyongping88.iteye.com/blog/1545930 用request.getRemoteAddr();方法获取的IP地址是:127.0.0.1或192.16 ...

  3. jQuery&lowbar;效果&lpar;隐藏和显示&rpar;

    一.jQuery hide() 显示和 show()隐藏 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <script type=&quot ...

  4. struts2采用convention-plugin实现零配置

    最近开始关注struts2的新特性,从这个版本开始,Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置. 配置文件精简了,的确是简便 ...

  5. ASP&period;NET - 使用 XML

    对XML文件进行简单的增加,删除,修改,查看等功能. XML代码: <?xml version="1.0" encoding="UTF-8"?> & ...

  6. WebStorm和IntelliJIEDA软件注册码网站（手动填写）

    很多人都发现 http://idea.lanyus.com/ 不能激活了 很多帖子说的 http://15.idea.lanyus.com/ 之类都用不了了 选择 License server (20 ...

  7. DotNetCore跨平台~xUnit生成xml报告

    在CI/CD流行至极的今天,你的项目没有自动化测试绝对是不可以接受的,在进行自动化部署和持续集成时,我们的dotnet core项目也是可以实现自动化的,之前说过gitlab,jenkins对持续集成 ...

  8. Maven（二）名词、命令、仓库、依赖、私服

    这篇文章将Maven其他内容做一个介绍. 一.名词 ①:localRepository 本地仓库路径,位于maven/conf/settings.xml中. ②:project  项目. ③:pom  ...

  9. DirectX11--HLSL编译着色器的三种方法

    前言 本教程不考虑Effects11(FX11),而是基于原始的HLSL. 目前编译与加载着色器的方法如下: 使用Visual Studio中的HLSL编译器,随项目编译期间一同编译,并生成.cso( ...

  10. mysql 将一个表中的数据复制到另一个表中，sql语句

    1.表结构相同的表,且在同一数据库(如,table1,table2) Sql :insert into table1 select * from table2 (完全复制) insert into t ...