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 ...
随机推荐
- 用jdk在cmd下运行编译java程序
1.首先通过创建一个txt文档,将java代码写入txt文档中保存 2.将保存好的HelloWorld.txt文档重命名为HelloWorld.java文件. 3.打开windows中的"命 ...
- 不惧面试：HTTP协议(3) - Cookie
v博客前言 先交代下背景,写这个系列的原因是总结自己遇到的面试题以及可能遇到的题目,更重要的是,今年定的目标是掌握网络这一块的知识点,先是搞懂HTTP协议,然后是TCP/IP协议,再就是WCF如何运用 ...
- 简单C程序，迷宫
#include<stdio.h> #include <stdlib.h> int visit(int, int); ][] = { {, , , , , , , , ,}, ...
- 《经久不衰的Spring框架：@ResponseBody 中文乱码》
问题背景 本文并不是介绍@ResponseBody注解,也不是中文乱码问题的大汇总笔记,这些网上都有很多内容了.这边仅对几年前,一个卡壳了挺久时间的问题的解决过程做一个记录,以警惕自己,达到自醒得目的 ...
- BZOJ 3083: 遥远的国度(树链剖分+DFS序)
可以很显而易见的看出，修改就是树链剖分，而询问就是在dfs出的线段树里查询最小值，但由于这道题会修改根节点，所以在查询的时候需判断x是否为root的祖先，如果不是就直接做，是的话应该查询从1-st[y ...
- 更新几篇之前写在公众号上的文章：线性可分时SVM理论推导；关联分析做捆绑销售和推荐；分词、去停用词和画词云
适合阅读人群:有一定的数学基础. 这几篇文章是16年写的,之前发布在个人公众号上,公众号现已弃用.回过头来再看这几篇文章,发现写的过于稚嫩,思考也不全面,这说明我又进步了,但还是作为学习笔记记在这里了 ...
- erlang erl文件编译的三种脚本
方案1:命令行 #!/bin/sh #file name: erl.sh #author: stars #time:2015.06.05 #eg: ./erl.sh hello.erl start 2 ...
- React Native填坑之旅 -- 使用iOS原生视图（高德地图）
在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的.有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的.React ...
- 【Zookeeper】源码分析之网络通信（一）
一.前言 前面已经分析了请求处理链中的多数类,接着继续分析Zookeeper中的网络通信模块. 二.总体框图 对于网络通信模块,其总体框图如下所示 说明: Stats,表示ServerCnxn上的统计 ...
- Synchronize执行过程
Synchronize执行过程及原理 在windows原生应用程序开发中,经常伴随多线程的使用,多线程开发很简单,难点就是在于线程的同步,在Delphi中提供了VC中不具备的一个过程Synchroni ...