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框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
随机推荐
- python linecache模块读取文件用法详解
linecache模块允许从任何文件里得到任何的行,并且使用缓存进行优化,常见的情况是从单个文件读取多行. linecache.getlines(filename) 从名为filename的文件中得到 ...
- ssh: connect to host localhost port 22: Connection refused
1.hadoop安装好之后,执行ssh localhost无法执行, 提示“ssh: connect to host localhost port 22: Connection refused”. 2 ...
- 一分钟搭建好webpack通用坏境
经常忘记一些常用的webpack配置,在这记录一下. webpack能用babel编译es5.能预编译.能加载静态资源(js/css/html).是一个很通用的开发坏境虽然不是很智能但是很好用很方便. ...
- UOJ#386. 【UNR #3】鸽子固定器(链表)
题意 题目链接 为了固定S**p*鸽鸽,whx和zzt来到鸽具商店选购鸽子固定器. 鸽具商店有 nn 个不同大小的固定器,现在可以选择至多 mm 个来固定S**p*鸽鸽.每个固定器有大小 sisi 和 ...
- 洛谷 3567/BZOJ 3524 Couriers
3524: [Poi2014]Couriers Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 2895 Solved: 1189[Submit][S ...
- MySQL - EXISTS 和 NOT EXISTS
语法规则: SELECT * FROM tableName t WHERE 1 = 1 AND 2 = 2 AND EXISTS (SELECT * FROM tableName t2 WHERE ...
- Linux菜鸟起飞之路【一】基本知识与Linux的安装
一.操作系统基本常识 1.操作系统的定义:操作系统是用来协调.管理和控制计算机硬件与软件资源的系统程序,介于硬件与应用程序之间. 2.操作系统内核的定义:操作系统内核是一个管理和控制程序,负责管理计算 ...
- java并发面试题-基础
多线程 java中有几种方法可以实现一个线程? 1.直接继承thread类:2.实现runnable接口: 如何停止一个正在运行的线程?可以使用正在运行的线程,支持线程中断,通常是定义一个volati ...
- python双向链表的疑问(Question)
Table of Contents 1. 问题 问题 在看 collections.OrderedDict 的源码时,对于它如何构造有序的结构这一部分不是很理解,代码如下: class Ordered ...
- Android 完美解决bundle实现页面跳转并保留之前数据+传值
1.前言 前言: 昨天碰到了一个问题,我想实现页面跳转,采用了Bundle之后,再回到原来的页面,发现数据也没有了, 而且一直报错,网上查找了很多资料,发现要用一个startActivityForRe ...