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框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
随机推荐
- CUDA直方图实例=CPU+GPU(global)+GPU(shared)
项目打包下载链接 顺便批判下CSDN上传坑爹现象,好多次都是到了95%或者99%就不动了.我……
- 10个HTML5 实战教程 提升你的综合开发能力
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- Oracle 数字处理函数
数字处理函数 ① mod(number1,number2) 取余数的函数,比如mod(10,3) = 10/3 = 1. ② round(number,num_ditigs) .trunk(numbe ...
- C#设计模式原则
原则的诞生:面向对象:封装.继承.多态三大支柱蕴含了用抽象来封装变化,降低耦合,实现复用的精髓: 封装:隐藏内部的实现,保护内部信息: 继承:实现复用,归纳共性: 多态:改写对象行为,实现更高级别的继 ...
- Springboot 入门创建hello world1!
1.首先使用工具是Eclipse,安装插件,点击“Help”-“Eclipse Marketplace...”, 一步步直接Ok,等待安装完成 2.创建Springboot项目 到此 就创建成功了 3 ...
- 最新手机号正则表达式php包括166等号段
if(!preg_match("/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147)) ...
- 绘制矩形:描边矩形imagerectangle()、填充矩形imagefilledrectangle()
<?php //1. 绘制图像资源(创建一个画布) $image = imagecreatetruecolor(500, 300); //2. 先分配一个绿色 $green = imagecol ...
- MySQL的增、删、查、改操作命令
MySQL的增.删.查.改操作命令: 一.修改mysql数据库密码 格式:mysqladmin -u用户名 -p旧密码 password 新密码. 二.查看 查看多少个数据库:注意 后面带s #查看 ...
- 动态规划、记忆化搜索:HDU1978-How many ways
Problem Description 这是一个简单的生存游戏,你控制一个机器人从一个棋盘的起始点(1,1)走到棋盘的终点(n,m).游戏的规则描述如下: 1.机器人一开始在棋盘的起始点并有起始点所标 ...
- poj 3259 时光穿梭问题 bellman_ford算法
题意:有n个空地,有m条双向大路,w条时光隧道单向路.问能否回到过去? 思路:判断是否有负环存在,如果有负环存在那么就可以一直小就可以回到过去了 创建源顶点 V到其他顶点的距离d 初始为INF d[1 ...