1.父组件调用子组件的方法:
1.1 注册子组件
var mainApp = new Vue({
components: {
'sms-template': smsTemplate
}
})
1.2 子组件加上ref
<sms-template ref="smsTemplate"></sms-template>
1.3 父组件通过ref访问子组件中定义的方法
showTemplateDlg: function showTemplateDlg() {
this.$refs.smsTemplate.showTemplateDlg();
},
2.子组件传值给向父组件
2.1 子组件使用$emit声明自定义事件
selectTemplate: function selectTemplate(row) {
this.template_dlg = false;
this.$emit('select-template', row.content);
},
2.2 父组件监听自定义事件并处理事件
selectTemplate: function selectTemplate(content) {
this.sms.content = content;
},
3.完整代码
父组件:
var mainApp = new Vue({
data: {
sms: {
content,
}
},
method: {
selectTemplate: function selectTemplate(content) {
this.sms.content = content;
},
showTemplateDlg: function showTemplateDlg() {
this.$refs.smsTemplate.showTemplateDlg();
},
},
components: {
'sms-template': smsTemplate
}
})
子组件:
var smsTemplate = {
data: {
template_dlg: false
},
methods: {
showTemplateDlg: function showTemplateDlg() {
this.template_dlg = true;
},
selectTemplate: function selectTemplate(row) {
this.template_dlg = false;
this.$emit('select-template', row.content);
},
}
}
页面:
<sms-template ref="smsTemplate" @select-template="selectTemplate"></sms-template>
分享到:
相关推荐
主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件、组件间通信的朋友可参考。希望此文章对各位有所帮助。 <!DOCTYPE html> <html lang="en"> <...
在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件...
主要给大家介绍了关于vue父子组件通信的高级用法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟。 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多。真的是前端开发人员必备技能。而且在...
这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础。 //父组件 我是父组件! <child></...
给大家介绍了vue2.0父子组件及非父子组件之间的通信方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
主要介绍了vue父子组件的通信的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
本篇文章主要介绍了vue2.0父子组件间通信的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
父子组件通信,都是单项的,很多时候需要双向通信。方法如下: 1、父组件使用:msg.sync=aa 子组件使用$emit('update:msg', 'msg改变后的值xxx’) 2、父组件传值直接传对象,子组件收到对象后可随意改变对象的...
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,感兴趣的朋友一起看看
主要为大家详细介绍了vue组件父子间通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁。当然还是要根据自己的业务...
这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件,但是login和login组件不是父子组件,就暂称为兄弟组件吧。 简而言之,我要解决的就是兄弟组件之间的信息传递问题。 //位于login.vue 中 export...