Vue 子组件向父组件传参
直接上代码
<body>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:ee="incrementTotal"></button-counter>
<button-counter v-on:ee="incrementTotal"></button-counter>
</div> <script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('ee', 'cc' )
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 'arg'
},
methods: {
incrementTotal: function (b) {
this.total = b + '1';
}
}
})
</script>
</body>
子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。
结果
点击几次后变成 
另外，写一个小拾遗。vue子组件用了定义模板组件功能，然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。
再说一个非常方便的v-ref
<body>
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div> <script>
Vue.component('user-profile', {
template: '<span>{{ msg }}</span>',
data: function () {
return {msg: 123};
},
methods: {
greet: function () {
console.log('hhhhh');
}
} })
var parent = new Vue({el: '#parent'});
var child = parent.$refs.profile;
child.greet();
</script>
</body>
Vue 子组件向父组件传参的更多相关文章
- 微信小程序 子组件给父组件传参
子组件给父组件传参只需这4步: 子组件的两步: 1.子组件绑定函数 addInfo <button type="primary" bindtap="addInfo& ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue组件之子组件和父组件
在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
随机推荐
- ios 的touch事件分析
IOS之触摸事件和手势 13.1 事件概述 13.2 触摸事件 13.3 手势 13.1 事件概述 事件是当用户手指触击屏幕及在屏幕上移动时,系统不断发送给应用程序的对象. 系统将事件按照特定的路 ...
- （python）对象的引用
对比下列两个例子: 例子1: a=10 b=a a=a+2 print "a=",a,"b=",b 结果:a= 12 b= 10 a+2后,b仍然是10 例子2 ...
- JIT动态编译器的原理与实现之Interpreter（解释器）的实现（三）
接下来,就是要实现一个虚拟机了.记得编码高质量的代码中有一条:不要过早地优化你的代码.所以,也本着循序渐进的原则,我将从实现一个解释器开始,逐步过渡到JIT动态编译器,这样的演化可以使原理看起来更清晰 ...
- 关于swfupload，客户端中文乱码解决方案!
公司做了个邮箱系统,上传附件用到了swfupload控件,测试成功上线后hr找我说上传附件中文乱码. 奇怪了,就只有她的电脑出问题,我找了好几台电脑,虚拟机也跑了怎么就找不到问题. 后来网上查了好久, ...
- Java 第17章 继承
继承的概念 继承机制是面向对象程序设计不可缺少的关键概念,是实现软件可重用的根基, 是提高软件系统的可扩展性与可维护性的主要途径. 所谓继承是指一个类的定义可以基于另外一个已经存在的类,即子类基于父类 ...
- 首次创建maven项目的准备工作
需要JDK1.5以上.Eclipse.maven maven下载地址:http://maven.apache.org/download.cgi 1.配置环境变量新建系统变量M2_HOME 2.运行cm ...
- coalesce函数用法
COALESCE函数会依次检查输入的参数,返回第一个不是NULL的参数,只有当传入COALESCE函数的所有的参数都是NULL的时候,函数才会返回NULL
- java学习笔记六——数组
数组类型 数组是一种常见的数据结构,可用于存放多个数据,每一个数组元素存放一个数据,通常可以通过下标进行访问其元素. Java数组要求所有数组元素具有相同的数据类型.因此,数组元素的数据类型是唯一的. ...
- C++类的内存分配
今天面试被问到一个类的内存问题,有些记不清楚了.用了 C++这么年,实在是不应该. 于是上网查了一些资料,并做了实验,整理如下: 所用测试环境为64位mac air,编译器为XCode 1.最简单 c ...
- ansible 自动化(1)
安装篇: yum安装 1.安装第三方epel源 centos 6的epel rpm -ivh http://mirrors.sohu.com/fedora-epel/6/x86_64/epel-rel ...