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 ...
随机推荐
- Yosemite 快速搭建 自带Apache+PHP5.6+MySQL 开发环境
1.安装homebrew ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)" 2.安装h ...
- javascript code snippet -- Forwarding Mouse Events Through Layers
Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...
- Fire
Fire 分析: 首先,明确题意:b1,b2,--,bn 交换为b2,--,bn,b1,但这并不是意味着只能从b1开始交换,(这点从样例中可以看出),并且也不意味着交换的必须是连续的一串,可以是几个单 ...
- C++中未初始化的bool值的问题
原创文件,欢迎阅读,禁止转载. 问题描述 你见过一个这样的bool值吗,判断 var 和 !var 都是成立的,今天被我遇到了,是在一个坑里遇到的.今天调试了一个程序,发送一个网络消息,结果总是得不到 ...
- Web调用FastReport的配置问题
1.修改配置webconfig文件 IIS6: <system.web> <httpHandlers> <add path="FastReport.Export ...
- android 的数学公式图片转换
在应用中的数学公式是不能直接以文本显示和输入的,包括在一些学习类网站上看到的公式,他们都是以gif图片的形式展示出来的.而怎么样生成各种各样的gif图片形式的数学公式呢,此处未作深入研究,我所知道的是 ...
- TypeError: matchExpr[type].exec is not a function
遇到了这个问题,很久没找到答案,后来使用了万能的google,貌似也没找到答案. 详细描述下: 通过使用 $(".select")来选择jqeury对象,没问题. 通过$(&quo ...
- Unity中使用多构造函数（转）
如果要实例化的类只有一个构造函数, 则使用方法很简单使用方法如下: 1 2 3 4 5 6 7 using (IUnityContainer container = new UnityContaine ...
- Unity : Ran out of trampolines of type 2
Unity 导出游戏到 iOS 平台,当时选择的设置是 mono2x, 结果游戏各种莫名其妙的崩溃,再崩溃, 几乎运行不到一分钟就崩溃,而在 editor 和 android 平台都是正常的. 查看出 ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...