1. 子组件
  2. <template>
  3. <div id="header">
  4. <input type="text" v-model="username" @change="setUser">
  5. </div>
  6.  
  7. </template>
  8.  
  9. <script type="text/ecmascript-6">
  10. export default{
  11. props: {
  12. },
  13. data()
  14. {
  15. return {
  16. username:''
  17. }
  18. },
  19. created() {
  20.  
  21. },
  22. methods: {
  23. setUser:function () {
  24. this.$emit('transferUser',this.username);
  25. }
  26. },
  27. components: {},
  28. computed: {}
  29. }
  30. </script>
  31.  
  32. <!-- Add "scoped" attribute to limit CSS to this component only -->
  33. <style scoped lang="stylus" rel="stylesheet/stylus">
  34.  
  35. </style>
  1. 父组件
  2. <template>
  3. <div id="app">
  4. <v-header @transferUser="getUser"></v-header>
  5. <div>用户名{{user}}</div>
  6. </div>
  7.  
  8. </template>
  9.  
  10. <script type="text/ecmascript-6">
  11. import header from 'components/header/header.vue';
  12.  
  13. export default{
  14. props: {},
  15. data()
  16. {
  17. return {
  18. user:''
  19. }
  20. },
  21. created() {
  22.  
  23. },
  24. methods: {
  25. getUser(msg){
  26. this.user=msg;
  27. }
  28.  
  29. },
  30. components: {
  31. 'v-header':header,
  32. },
  33. computed: {}
  34. }
  35. </script>
  36.  
  37. <!-- Add "scoped" attribute to limit CSS to this component only -->
  38. <style scoped lang="stylus" rel="stylesheet/stylus">
  39.  
  40. </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. Ubuntu安装mysql和简单使用

    一.安装mysql sudo apt-get install mysql-server sudo apt-get isntall mysql-client sudo apt-get install l ...

  2. Hadoop集群批量命令执行

    ./pdsh -R ssh -w node-10-0[0-5] hostname -R:指定传输方式,默认为rsh,本例为ssh,如果希望ssh传输需要另行安装pdsh-rcmd-ssh,如果希望ss ...

  3. JDBC开发,数据库的连接

    JDBC开发步骤 1.建完工程后,右击工程,new,新建一个文件夹Folder,装jar包,        2.将下载好的驱动包打开,找到jar文件,CTRL+C,选中装jar包的文件夹,CTRL+V ...

  4. css布局:块级元素的居中

    一.定宽: 1.定位居中(absolute) 方法一: html: <div class="main"></main> css: .main{ width: ...

  5. oc字典放入到数组里,根据字典里的属性排序(重点)

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  6. Java读取各种文件格式内容

    所需的jar包哦也不要太记得了,大家可以搜搜,直接上代码: import java.io.BufferedInputStream; import java.io.File; import java.i ...

  7. 用户和用户组以及 Linux 权限管理

    1.从 /etc/passwd 说起 前面的基本命令学习中,我们介绍了使用 passwd 命令可以修改用户密码.对于操作系统来说,用户名和密码是存放在哪里的呢?我们都知道一个站点的用户名和密码是存放在 ...

  8. nodejs实现前后端交互

    本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...

  9. JZOJ 5835 Prime

    Description

  10. 03.VUE学习之动态绑定值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...