vuejs子组件向父组件传递数据
子组件通过$emit方法向父组件发送数据，子组件在父组件的模板中，通过自定义事件接收到数据，并通过自定义函数操作数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- 子组件向父组件传递数据 -->
<div id="box">
<v-parent></v-parent>
</div> <!-- 父组件模板 -->
<template id="parent">
<div>
<span>{{msgParent}}</span>
<v-child @child-info="get"></v-child>
</div>
</template> <!-- 子组件模板 -->
<template id="child">
<div>
<button @click="send">send</button>
<!-- <p>{{msgChild}}</p> -->
</div>
</template>
<script type="text/javascript">
var app = new Vue({
el:'#box',
components:{
// 父组件
'v-parent':{
data() {
return {
msgParent:'hello'
}
},
template:'#parent',
methods:{
get(msg){
this.msgParent = msg
}
},
// 子组件
components:{
'v-child':{
data(){
return {
msgChild:'child'
}
},
template:'#child',
methods:{
send(){
this.$emit('child-info',this.msgChild)
}
}
}
}
}
}
})
</script>
</body>
</html>
此时点击子组件模板中的按钮，父模板中的子组件会接受到数据
vuejs子组件向父组件传递数据的更多相关文章
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue子页面给父页面传递数据
子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...
- vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- vue组件-子组件向父组件传递数据-自定义事件
自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vuejs利用props，子组件修改父组件的数据，父组件修改子组件的的数据，数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
- 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp
(一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...
- vuejs2.0子组件改变父组件的数据
在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当我们把父元素的数据给子组件时,需要传一个 ...
- vue2.0子组件修改父组件props数据的值
从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...
随机推荐
- android之intent显式，显式学习
intent,意图 当从一个Activity到另一个Activity时调用,这里重点学习显式,隐式的使用 使用语句上的区别: 隐式意图: 显式意图: setAction ...
- JavaScript 基本类型值-Number类型
▓▓▓▓▓▓ 大致介绍 在JavaScript的内部采用IEEE754格式来表示数字,所以不区分整数和浮点数,都是用64位浮点数的形式储存.就是说,在JavaScript内部,就根本没有小数.但是有些 ...
- SaberRD之蒙特卡罗分析（一）
[声明]本博文的大部分内容摘录于网络,本人按照自己的思维习惯和文字风格进行了重新整理以便于理解和记忆. 鉴于篇幅,我打算先对蒙特卡罗分析的基本思想和历史渊源做一下简单的梳理,然后在下一篇博文中介绍Sa ...
- ABP Zero 多租户管理
ABPZero - 多租户管理 启用多租户 ASP.NET Boilerplate和module-zero可以运行多租户或单租户模式.多租户默认为禁用.我们可以在我们的模块PreInitialize方 ...
- Abp zero 3.0.1发布
v3.1.0 (2017-02-14) Angular 2.x UI Angular 2 AOT (Ahead Of Time) Compilation, and HMR (Hot Module Re ...
- [Qt初级] 解决 中QMainWindow和QDockWidget添加布局失败问题
初接触Qt,使用的教程是陆文周编写的<Qt5开发及实例>一书. 其中有关于QDockWidget.QStackedWidget这些类的介绍和使用实例. 要首先说明的是书上讲的非常的清楚,代 ...
- JavaScript基础——变量、语句、注释
一.变量的命名规则 1.变量名由数字.字母.下划线组成 2.变量名的首字母不能是数字,只能是字母或者下划线 3.不能使用关键字和保留字作为变量名 4.变量严格区分大小写,例如在JavaScript中o ...
- Java对象序列化的使用和定制
序列化的概念及使用场合 序列化就是把对象转化为字节序列并持久化保存,可以保存在内存中.磁盘文件系统,甚至通过网络传递,并能够在以后将这个字节序列完全恢复为原来的对象. 对象序列化的概念引入Java是为 ...
- x01.Weiqi.13: 鼎力推荐
鼎力推荐 : 点击后即可观看,小伙子讲的很有深度. 说到深度,自然离不了深度学习.AlphaGo 的横空出世,似乎很有学习的必要. MuGo: 点击下载后,发现是 python,自然免不了一番学习,好 ...
- 每天一个Linux命令 6
rpm包管理--yum在线管理 ip地址配置和网络yum源ip地址配置 #setup 使用setup工具 #vi /etc/sysconfig/network-scripts/ifcfg-eth0把O ...