子组件
<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子组件向父组件传递数据的更多相关文章

  1. Vue子页面给父页面传递数据

    子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...

  2. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  3. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  4. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue组件-子组件向父组件传递数据-自定义事件

    自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

  6. vuejs子组件向父组件传递数据

    子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...

  7. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  8. vue子组件向父组件传递参数的基本方式

    子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...

  9. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  10. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

随机推荐

  1. for循环和数组练习

    //公鸡2文,母鸡1文,小鸡半文,每种至少一只,100文买100只鸡有多少种可能 var ci =0; for(var g=1;g<50;g++){ for(var m=1;m<100;m ...

  2. Linux分享笔记:查看帮助命令 & 常用系统工作命令

    在执行命令时,为了防止出现权限不足的问题,在登陆Linux系统时,要点击普通用户名下的 “Not listed?” 用root管理员身份登陆. [1] 执行查看帮助命令 man 这条命令用来查看帮助文 ...

  3. split 分割压缩文件

    1.普通tar压缩命令 tar -zcvf cm-11.tar.gz cm-11 //将cm-11文件夹压缩成cm-11.tar.gz 2.压缩后的文件太大,需要将cm-11.tar.gz分割成N个指 ...

  4. hibernate系列之一

    通过自己不断的学习框架以及相关知识的学习,自己学会总结了学习路上遇到的一些问题以及疑惑,自己现在跟着相关的学习资料又进行了一些总结和实践,希望通过自己走过的学习之路能够帮助小伙伴们解决一些学习上问题或 ...

  5. 动态拼接SQL语句

    1.参考官方文档 ? if:字符判断 ? choose (when, otherwise):分支选择 ? trim (where, set):字符串截取:其中where标签封装查询条件,set标签封装 ...

  6. Sonya and Robots CodeForces - 1004C (思维题)

    Sonya and Robots time limit per test 1 second memory limit per test 256 megabytes input: standard in ...

  7. BFS:Nightmare(可返回路径)

    解题心得: 1.point:关于可以返回路径的BFS的标记方法,并非是简单的0-1,而是可以用时间比较之后判断是否push. 2.queue创建的地点(初始化问题),在全局中创建queue在一次调用B ...

  8. 二分法:CF371C-Hamburgers(二分法+字符串的处理)

    Hamburgers Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u    Desc ...

  9. PAT Advanced 1001

    1001 A+B Format (20 分) Calculate a+b and output the sum in standard format -- that is, the digits mu ...

  10. 笔记-python-装饰器

    笔记-python-装饰器 1.  装饰器 装饰器的实质是返回的函数对象的函数,其次返回的函数对象是可以调用的,搞清楚这两点后,装饰器是很容易理解的. 1.1.  相关概念理解 首先,要理解在Pyth ...