如何调用vue组件的功能?

时间:2018-01-26 05:13:26

标签: vue.js vuejs2 vue-component

根据我的理解,Vue组件是一个类, 所以我可以把它包括在内:

import MyDialogComponent from './MyDialog.vue'

创建一个实例:

<my-dialog-component/>

看起来我可以分配visibility属性,如:

prop: ['showDialog'] //delcare property
...
<md-dialog :md-active.sync="getActive"> 
...
computed:{ getActive: function () { return this.showDialog } } 
...
<my-dialog-component show-dialog='true'/>

使对话框组件可见。当我尝试通过按钮单击显示对话框时。 一切都变得复杂。许多变量需要在双方声明和绑定。但实际上我只使用了一个属性,即MyDialog的可见性。

所以要显示MyDialog,无论如何这样?

myDialog1.showMe()

调用实例的公共函数。

1 个答案:

答案 0 :(得分:1)

您可以在组件中添加ref

例如:<my-dialog-component ref="dialog1" />

然后在你的代码中:

this.$refs.dialog1.showMe()