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 ...
随机推荐
- 【洛谷P2866】Bad Hair Day
单调栈版子 #include<cstdio> #include<cstring> using namespace std; ; ,zh[N]; int read(){ ; ch ...
- 实现js的二叉树
今天算是第一次写一篇自己的博客,越是学习就越感叹学无止境,为了记录下来用js实现二叉树的方法,这算是最简单的一个算法了. 二叉树实现原理:把数组的第一个数据当作根节点,每个节点都有根节点,左孩子和右孩 ...
- 找一个四位数，要求该四位数的四倍刚好是该四位数的反序。 即b1b2b3b4 * 4 = b4b3b2b1
找一个四位数,要求该四位数的四倍刚好是该四位数的反序. 即b1b2b3b4 * 4 = b4b3b2b1 解: 第一步,确认最末位 假设 b1b2b3b4 + b4b3b2b1 = [x0]x1x2x ...
- CentOS详解top命令各个数据的含义
最近在docker(宿主机是centos虚拟机)里安装gitlab,发现随着时间的运行,虚拟机的内存持续走高,运行几个小时之后内存已经爆掉了,putty远程处理于假死状态. 这个时候就需要查看内存进程 ...
- [UCSD白板题] Pairwise Distinct Summands
Problem Introduction This is an example of a problem where a subproblem of the corresponding greedy ...
- Android图片复制
public void saveImage2Phone(SlideShowImage image){ String imagePath; if(Environment.getExternalStora ...
- JAVA设计模式--抽象工厂模式
抽象工厂设计模式 1.系统中有多个产品族,而系统一次只可能消费其中一族产品2.同属于同一个产品族的产品以其使用.来看看抽象工厂模式的各个角色(和工厂方法的如出一辙):抽象工厂角色: 这是工厂方法模式的 ...
- erlang日志功能。
用cowboy这个库,没有日志功能,所以研究了otp提供的日志功能. 1.启动SASL的方式 erl –boot start_sasl 默认配置文件下启动SASL, {env, [{sasl_erro ...
- petapoco 使用 MiniProfiler Glimpse监控
PetaPoco是一款适用于.Net(window) 和Mono( linux )的微小.快速.单文件的微型ORM. MVC MiniProfiler是Stack Overflow团队设计的一款对AS ...
- 爬虫爬数据时，post数据乱码解决办法
最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler. F ...