如何直接调用Vue Component里的方法?
JavaScript
2017-12-25
有时候,我们需要在另一个A Component里直接调用B Component里的方法,但Vue的Component和我们平常写的js module不一样,不能简单的通过important后就直接调用,下面是我找到的一种方法,目前测试可用
AComponent.vue
<template> <div> <b-component ref="BComponent"></b-component> </div> </template> <script> import BComponent from './BComponent' export default { name: 'A', data () { }, components: { BComponent }, methods: { callACompoentFunction () { this.$refs.BComponent.sayHi() } } } </script> <style scoped> </style>
BComponent
<template> <div></div> </template> <script> export default { name: 'B', data () { }, methods: { sayHi () { console.log('Hello world!') } } } </script> <style scoped> </style>
思路就是:
1、important进来
2、componets属性里添加
3、页面上添加被引进来的component标签,并添加ref属性
4、通过this.$refs找到引入的Child Component,后面直接加方法名就好,默认所有方法都可以访问到
文字链接:《如何直接调用Vue Component里的方法?》
文章地址:http://www.qttc.net/201712491.html
除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源
相关博文
换一组Comments 0
Hi,你想第一个做沙发么?
乳名?小名?昵称?网名?均可
email,放心,我不会给你乱投广告的
想获得回访就把你的站点URL写上(没有留空)
[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法