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 ...
随机推荐
- 怎么监控apache运行状态和页面统计
通过使用mod_status的模块来监控Apache web server的负载. 1. mod_status是什么? mod_status是一个apache模块,它帮助监控web server负载和 ...
- Mybatis实战之TypeHandler高级进阶
上篇文章分享了在项目实战中自定义Mybatis的TypeHandler来处理枚举类型.文章结尾也指出了美中不足之处,那就是每次都需要指定我们自定义的枚举TypeHandler. 随着项目枚举类型的增多 ...
- mysql 命令备份
导出要用到MySQL的mysqldump工具,基本用法是: shell> mysqldump [OPTIONS] database [tables] 如果你不给定任何表,整个数据库将 ...
- Hibernate 迫切连接和普通连接的区别
package com.baidu.test; import java.util.ArrayList;import java.util.LinkedHashSet;import java.util.L ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- 使用grunt实现web自动化
1.grunt作用 实现压缩.编译.单元测试等重复性工作 2.需要安装的软件 第一步:从官网获取nodejs的软件包,直接双击进行安装(windows下) 第二步:打开 ...
- maven 项目发布时，无法引用 修改的domain 问题
其实是在bo 的smart-score 里面引用了这个interface 所以还要把 smart -Score 重新发布一下.让这个smart 引用 新的 Player-service 中的i ...
- thinkphp join加别名
//此段代码在某个Model里面$tbpre = $this->tableprefix;$Aaa = M('aaa');$Aaa->table(array("{$tbpre}aa ...
- 2017-3-10 SQL server 数据库 T--SQL语句
创建数据库:create datebase 数据库名 注:数据库名不能为中文,不能数字开头,不能符号开头. 删除数据库:drop datebase 数据库名 创建表:create tab ...
- 算法模板——sap网络最大流 2（非递归+邻接表）
实现功能:同最大流 1 这里面主要是把前面的邻接矩阵改成了邻接表,相比之下速度大大提高——本人实测,当M=1000000 N=10000 时,暂且不考虑邻接矩阵会不会MLE,新的程序速度快了很多倍(我 ...