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 ...
随机推荐
- 2011 Multi-University Training Contest 1 - Host by HNU
A.A + B problem(待填坑) B.Cat VS Dog(二分图匹配) 喜欢cat和喜欢dog的人构成了二分图,如果两个人有冲突则连一条边,则问题转化为二分图最大点独立集问题.ans=n-最 ...
- 分别用C/C++实现栈
用C语言的方式实现栈: #include <stdio.h> #include<stdlib.h> #include<assert.h> struct Link { ...
- Linux实战教学笔记17:精简shell基础
第十七节 精简shell基础 标签(空格分隔): Linux实战教学笔记 1,前言 1.1 为什么学习shell编程 Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, ...
- 使用StyleCop.Analyzers进行代码审查
为什么要进行代码审核? 提早发现代码中的BUG,避免将BUG带到生产环境 极大的提高软件质量,以及可维护性 统一代码规范.提高可读性,减少新加入成员的熟悉时间 加速个人和团队的成长,知识和经验的积累 ...
- HTTP基础知识（一）
一.了解web及网络基础 1.通过发送请求获取服务器资源的web浏览器等的都可称为客户端(client) 2.HTTP:HyperText Transfer Protocol,超文本传输协议:所有的W ...
- 每天一个linux命令31)--chown命令
chown将 指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID,组可以使组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷 ...
- 每天一个Linux命令（17）--whereis命令
whereis 命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返所有信息. 和find相比,whereis查找的速度非 ...
- (三目运算符)PHP中问号?和冒号: 的作用
<表达式1>?<表达式2>:<表达式3>; "?"运算符的含义是: 先求表达式1的值, 如果为真, 则执行表达式2,并返回表达式2的结果 ; 如 ...
- 《类型编程晋级——shapeless类库使用指南》前言及第一章翻译
从年初开始进行此项工作,我和合作伙伴包亮付出了大量而艰辛的劳动,现基本翻译完毕,有出版意向,如果有意向欢迎联系,不甚感激!也欢迎各位博友对此翻译提出意见建议以及指导如何出版,在此谢过! 前言 时间回到 ...
- Android学习总结（十二）———— BaseAdapter优化
一.BaseAdapter的基本概念 对于Android程序员来说,BaseAdapter肯定不会陌生,灵活而优雅是BaseAdapter最大的特点.开发者可以通过构造BaseAdapter并搭载到L ...