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>
最新文章
- ios回调函数的标准实现:protocol+delegate
- NPOI导出Excel(含有超过65335的处理情况)
- 用spring+hibernate+struts 项目记录以及常用的用法进等
- Ruby on Rails框架开发学习
- 内存的分配VS回收&;构造函数VS析构函数
- 445. Add Two Numbers II ——while s1 or s2 or carry 题目再简单也要些测试用例
- 【转】TLB(Translation Lookaside Buffers,TLB)的作用
- 关于Object[]数组强转成Integer[]类型的数组.
- ajax调用服务的基本格式
- asp.net中.ashx文件接参
- USACO Section 1.3 Prime Cryptarithm 解题报告
- git 生成公钥、私钥方法与clone使用方法
- Python +selenium自动化环境的搭建
- (转)理解maven命令package、install、deploy的联系与区别
- (深度好文)重构CMDB,避免运维之耻
- Java理论学时第三节。课后作业。
- Android-消息处理学习总结(Handler,Looper)
- [转帖] wordpress 的安装过程
- Qt编译好的oracle驱动下载
- Asakura的魔法世界
热门文章
- Java接口自动化测试之TestNG学习(二)
- 51 Nod 1079 中国剩余定理(孙子定理)NOTE:互质情况
- models批量生成数据
- MyBatis - 2.全局文件配置
- 通过expdp和impdp将Oracle11g数据导入到Oracle10g中
- es6 Proxy
- seafile增加邮件服务功能
- net core体系-web应用程序-4net core2.0大白话带你入门-2asp.net core新建项目
- Codeforces 1092E Minimal Diameter Forest
- 006 numpy常用函数