子组件
<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. 推荐一个WebIDE在线编程语言编译器C9.io

    有时借用别人电脑或者不想在电脑上安装各种乱七八糟的IDE,就可以考虑 Web IDE.随着Web技术发展,很多语言的编译工作都可以利用Web 浏览器来完成. 1. 推荐国外的 C9.io 个人可以免费 ...

  2. Bootstrap历练实例:响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. java基础面试题:说说&和&&的区别

    &与&&都是逻辑与 不同的是&左右两边的判断都要进行,而&&是短路与,当&&左边条件为假则不用再判断右边条件,所以效率更高 例如,对于i ...

  4. Oracle问题分析采集数据的方法

    1.背景: 运维人员或多或少都会遇到分析问题.分析故障的时候,往往在碰到一些棘手的问题事,我们都会往更深层次的专家进行求助.不管是二线专家还是Oracle全球服务工程师(后文称GCS工程师),往往都会 ...

  5. MySQL表碎片整理

    MySQL表碎片整理 1. 计算碎片大小 2. 整理碎片 2.1 使用alter table table_name engine = innodb命令进行整理. 2.2 使用pt-online-sch ...

  6. 7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页 并没有将列表页的数据json 与前端的页面展示结合起来 讲解如果将dr ...

  7. Python导入模块方法

    import module_name 导入整个模块 from module_name import function_name 导入特定函数 from module_name import funct ...

  8. 3D全景漫游

    全景图共分为三种: ①球面全景图 利用一张全景图围成一个球,自身位置位于球体内.由于图片是矩形,所以最上和最下的缝合处很明显就能够看得出来. 球面全景图是最接近人眼的构建模式,若利用多个立面构建,拼接 ...

  9. ThinkPHP邮件发送S(Smtp + Mail + phpmailer)

    三种邮件发送介绍:(Smtp,Mail以及phpmailer)ThinkPhp 框架下开发. 邮件发送配置先前准备(用该账号做测试用):(这里用新浪邮箱服务器)将自己的新浪邮箱开通 POP3/SMTP ...

  10. 用scala的actor并发编程写一个单机版的WorldCount

    前言:最近一段时间比较忙,也是比较懒了吧,好长时间没写博客了,新的一年到来,给自己一个小目标,博客坚持写下去,分享一下这历程!废话不多说,开始正题咯(希望大家喜欢!) 首先这算是一个scala程序的入 ...