vue组件父子组件之间传递数据
举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../Vue.js"></script>
<template id="tpl1">
<h3>我是父组件 -->{{msg}}</h3>
<bbb @child-data="get"></bbb>
</template>
<template id="tpl2">
<input type="button" value="发送" @click="send()">
<h4>我是子组件 -->{{msg2}}</h4>
</template>
<script>
//子组件取父组件的数据
window.onload = function () {
new Vue({
el:"#div",
//局部小组件
components:{
'aaa':{
data: function () {
return {
msg:'我是父组件的数据'
}
},
template:'#tpl1',
methods: {
get: function (m) {
this.msg = m;
}
},
components:{
'bbb':{
data: function () {
return {
msg2: '我是子组件'
}
},
template:"#tpl2",
methods: {
send:function (){
this.$emit('child-data',this.msg2);
}
}
} }
}
}
})
}
</script>
</head>
<body> <div id="div">
<aaa></aaa>
</div>
</body>
</html>
vue组件父子组件之间传递数据的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- ThreadLocal父子线程之间的数据传递问题
一.问题的提出 在系统开发过程中常使用ThreadLocal进行传递日志的RequestId,由此来获取整条请求链路.然而当线程中开启了其他的线程,此时ThreadLocal里面的数据将会出现无法获取 ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Angular组件——父子组件通讯
Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...
- H5 页面与小程序之间 传递数据
H5 页面与小程序之间 传递数据 小程序里面的 H5页面与小程序之间怎么传递数据 webview与小程序之间的实时通信 webview主动发消息给小程序 webview可以利用jssdk提供的 wx. ...
- 对于vue和react“页面间”传递数据的理解误区
前言 如果我们想要实现多个标签页之间的通信,可以使用localStorage.cookie等,但是能不能用vue或react呢? 结论 答案是NO,因为vue和react虽然可以在“多个”页面之间传递 ...
- Activity之间传递数据的方式及常见问题总结
Activity之间传递数据一般通过以下几种方式实现: 1. 通过intent传递数据 2. 通过Application 3. 使用单例 4. 静态成员变量.(可以考虑 WeakReferences) ...
- Controller之间传递数据：属性传值
在项目中,Controller之间传递数据非常之多,这里简单介绍一下属性传值.例如有FirstController 和 SecondController,数据从First传递到Second中,我们如何 ...
随机推荐
- python 读取CSV文件 中文乱码
今天读取一个CSV文件,打印出来,中文显示乱码,原因是编码的缘故,CSV保存是编码格式ANSI,解决办法是以记事本方式打开CSV文件,然后另存为时编码选择UTF-8进行保存即可.
- [转载]使用expect实现shell自动交互
FROM:http://www.nginx.cn/1934.html shell脚本需要交互的地方可以使用here文档是实现,但是有些命令却需要用户手动去就交互如passwd.scp 对自动部署免去用 ...
- 解決從Ubuntu 12.04升級至12.10之後的Unity顯示問題
FROM: http://blog.sina.com.cn/s/blog_97ef3ff4010190pe.html#bsh-75-306370781 今天中午經過系統自帶的“檢查更新”軟件從Ubun ...
- ASP.NET MVC学习---（九）权限过滤机制（完结篇）
相信对权限过滤大家伙都不陌生 用户要访问一个页面时 先对其权限进行判断并进行相应的处理动作 在webform中 最直接也是最原始的办法就是 在page_load事件中所有代码之前 先执行一个权限判断的 ...
- eclipse自动添加作者、日期等注释
使用eclipse的时候一般会添加自己的注释,标注日期作者等内容,我总结的添加注释的方式有两种:一.在新建class时自动添加注释:二.通过快捷键自动添加注释.下面分别描述一下添加方式. 一.新建cl ...
- POJ 2503-Babelfish(map)
题目地址:POJ 2503 题意:输入一个字典.字典格式为"英语 外语"的一一映射关系然后输入若干个外语单词.输出他们的 英语翻译单词,假设字典中不存在这个单词,则输出" ...
- JAVA Eclipse如何设置点击按钮切换图片
右击图片文件夹,新建一个Android XML文件 设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...
- Laravel之Eloquent ORM关联
一.一对一 1.主对从(hasOne) 从User模型中取出用户的手机 User模型中: /** * 获取关联到用户的手机 */ public function phone() { return $t ...
- php url路由伪静态
RewriteEngine on RewriteBase /RewriteRule ^([a-zA-Z]{1,})/([a-zA-Z]{1,})$ webim2/operator/users.php? ...
- AngularJS---Unknown provider: $routeProvider
AngularJS路由报错: Unknown provider: $routeProvider 根据先知们的指引,在网上爬贴,有翻到官方的解决文章. 原来在AgularJS1.2.0及其之后的版本中, ...