Vue子页面给父页面传递数据
子页面:
<template>
<div>
<p>子组件</p>
<button @click="sendMsg">传递到父页面</button>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
msg:'子组件数据'
}
},
computed:{
addNum(){
return this.num*5
}
},
methods:{
sendMsg(event){
this.$emit('sendmsg',this.msg)
this.$emit('addnum',this.addNum)
}
},
props:{
num:{
type:Number,
default:5
}
}
}
</script>
<style>
</style>
父页面:
<template>
<div>
<p>父组件</p>
<input type="text" v-model="num" />
<child @sendmsg='getMsg' :num='num' @addnum='getNum'/>
<p>{{info}}</p>
<p>{{num}}</p>
</div>
</template>
<script>
import child from './child'
export default {
name: 'parent',
data() {
return {
info:'',
num:10
}
},
components:{
child
},
methods:{
getMsg(data){
this.info = data
},
getNum(data){
this.num = data
}
}
}
</script>
<style>
</style>
Vue子页面给父页面传递数据的更多相关文章
- vue子组件向父组件传递数据
子组件 <template> <div id="header"> <input type="text" v-model=" ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vuejs子组件向父组件传递数据
子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件-子组件向父组件传递数据-自定义事件
自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
- vue 实现,子组件向父组件 传递数据
首先理清组件之间的关系 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 ...
- Vue 组件通信(子组件向父组件传递数据)
1.自定义事件 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="U ...
- vue子组件修改父组件传递过来的值
这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组 ...
随机推荐
- 饮冰三年-人工智能-Python-13Python基础之运算符与数据类型
1:算数运算符 + - * / ** % // 2: 成员运算符 in not in name = """张三""" if "张& ...
- 在 Python 中使用 JSON
在 Python 中使用 JSON 本教程将会教我们如何使用 Python 编程语言编码和解码 JSON.让我们先来准备环境以便针对 JSON 进行 Python 编程. 环境 在我们使用 Pytho ...
- Python - 去除list中的空字符
list1 = ['122', '2333', '3444', '', '', None] a = list(filter(None, list1)) # 只能过滤空字符和None print(a) ...
- SVG 图像入门教程
http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...
- kafka.common.KafkaException: Failed to acquire lock on file .lock in /tmp/kafka-logs. A Kafka instance in another process or thread is using this directory.
1.刚才未启动zookeeper集群的时候,直接启动kafka脚本程序,kafka报错了,但是进程号启动起来来,再次启动出现如下所示的问题,这里先将进程号杀死,再启动脚本程序. [hadoop@sla ...
- zookeeper 学习 zookeeper下载部署
下载 http://mirror.bit.edu.cn/apache/zookeeper/ 校验 解压后得到zookeeper-3.4.10.jar,使用md5sum zookeeper-3.4.10 ...
- Jmeter入门(压力测试)
Jmeter介绍 Jmeter是一款使用Java开发的,开源免费的,测试工具, 主要用来做功能测试和性能测试(压力测试/负载测试). 而且用Jmeter 来测试 Restful API, 非常好用. ...
- java抽象类详解
前言 在没讲抽象类之前 我们先来看看 final关键字 final 修饰符 可以修饰 类.属性.方法 修饰类时 表示该类不能被继承 其他特征 跟普通的类一样 修饰 属性时 表示 改属性不能改变 ...
- python全栈开发day62-两表操作增删改查,外键,if else模板语法
一.今日内容总结: day62 内容回顾: 1. django有关所有命令: pip install django==1.11.14 django-admin startproject 项目名称 cd ...
- cmake与autoconf+automake
cmake与autoconf+automakes是同类的编译工具,本人常用的是cmake. 这有一篇对比的文章,记录一下. cmake与autoconf+automake的对比