vue子组件向父组件传递数据
子组件
<template>
<div id="header">
<input type="text" v-model="username" @change="setUser">
</div> </template> <script type="text/ecmascript-6">
export default{
props: {
},
data()
{
return {
username:''
}
},
created() { },
methods: {
setUser:function () {
this.$emit('transferUser',this.username);
}
},
components: {},
computed: {}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus"> </style>
父组件
<template>
<div id="app">
<v-header @transferUser="getUser"></v-header>
<div>用户名{{user}}</div>
</div> </template> <script type="text/ecmascript-6">
import header from 'components/header/header.vue'; export default{
props: {},
data()
{
return {
user:''
}
},
created() { },
methods: {
getUser(msg){
this.user=msg;
} },
components: {
'v-header':header,
},
computed: {}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus"> </style>
vue子组件向父组件传递数据的更多相关文章
- Vue子页面给父页面传递数据
子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件-子组件向父组件传递数据-自定义事件
自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
- vuejs子组件向父组件传递数据
子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue子组件向父组件传递参数的基本方式
子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
随机推荐
- 基于Qt Creator实现中国象棋人机对战, c++实现
GitHub地址: https://github.com/daleyzou/wobuku 这是自己大一学完c++后,在课程实践中写过的一个程序,实现象棋人机对战的算法还是有点难的, 自己当时差不多也是 ...
- Linux企业生产环境用户权限集中管理项目方案案例
企业生产环境用户权限集中管理项目方案案例: 1 问题现状 当前我们公司里服务器上百台,各个服务器上的管理人员很多(开发+运维+架构+DBA+产品+市场),在大家登录使用Linux服务器时,不同职能的员 ...
- webpack+thymeleaf实现数据直出
webpack动态插入thymeleaf模板,MVC将要使用数据传递到模板中渲染,得到的html就已经带有要初始显示的数据了github:https://github.com/947133297/we ...
- 选择 NoSQL 数据库需要考虑的 10 个问题
那么我为什么要写这篇文章呢? 是因为我认为NoSQL解决方案不如RDBMS解决方案吗?当然不! 是因为我专注于SQL的做事方式,而不想陷入一种相对较新的技术的不确定性吗?不,也不是!事实上,我非常兴奋 ...
- 精通SpringBoot--整合druid监控SQL执行
咳咳,今天我们做些简单而实用的东西,使用springboot 整合alibaba的driud数据库监控工具.alibaba已经提供了spring-boot-starter的jar包了.先看pom.xm ...
- pandas知识点(汇总和计算描述统计)
调用DataFrame的sum方法会返还一个含有列的Series: In [5]: df = DataFrame([[1.4,np.nan],[7.1,-4.5],[np.nan,np.nan],[0 ...
- poj-3253 fence repair(贪心题)
题目描述: Farmer John wants to repair a small length of the fence around the pasture. He measures the fe ...
- CodeForces:#448 div2 a Pizza Separation
传送门:http://codeforces.com/contest/895/problem/A A. Pizza Separation time limit per test1 second memo ...
- CountDownLatch、CyclicBarrier、Semaphore的区别
在java 1.5中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如CountDownLatch,CyclicBarrier和Semaphore,今天我们就学习一下这三个辅助类的用法. 以下是 ...
- Android stadio
Android stadio 最近遇到大问题,就是主功能行.但是让它做库工程,他就不管用. 但是在eclipse里面就可以.