如何实现在JS文件中获取Vue组件 - 行业资讯 - 肥雀云

　　介绍

这篇文章运用简单易懂的例子给大家介绍如何实现在JS文件中获取Vue组件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强> 1。背景

最近在写项目时候遇到这样一个需求:

为了方便理解,上述js文件和组件名非实际工程中的名字,仅是示例。

<强> 2。思路

通过调用函数把组件实例这传递到被应用的js文件里。

<强> 3。目录结构

src/├──App.vue 　　├──资产　　├──main.js 　　├──组件　　└──的观点　　└──演示　　├──my-component.vue 　　└──utils.js

<强> 4。代码实现

在<代码>跑龙套。js代码中定义一个变量和一个函数,该变量用于存放组件实例<代码> ,该函数用于接收组件实例<代码> 。

跑龙套。js

//用来存放调用此js的vue组件实例(这)
　　让vm=零
　　
　　const sendThis=(_this)=比;{
　　vm=_this
　　}
　　
　　出口默认{
　　sendThis,//暴露函数
　　描述:& # 39;我是一个工具类方法& # 39;,
　　getData () {
　　console.log (vm)//打印拿到的组件实例
　　console.log (vm.userProfile)//打印组件中的数据
　　},
　　callMethod () {
　　vm.clearForm()//调用组件中的方法
　　}
　　}

在<代码>组件。vue> 跑龙套。js代码> 跑龙套。js代码的<代码> sendThis 方法,把这<代码> 传过去即可。

组件。vue

& lt; template> 　　& lt; div类=癿y-component"祝辞& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　从& # 39;进口跑龙套。/跑龙套# 39; 　　　　出口默认{ 　　名称:& # 39;MyComponent& # 39; 　　数据(){ 　　返回{ 　　userProfile: & # 39; & # 39; 　　} 　　}, 　　安装(){//发送这到js文件里　　utils.sendThis(这个); 　　}, 　　方法:{//这个函数会在跑龙套。js文件中被调用　　clearForm () {//执行一些操作　　},//打印跑龙套。js中描述的　　showMsg () { 　　console.log (utils.description) 　　} 　　} 　　} 　　& lt;/script>

<强> 5。其它思路

还有一种思路:

把一些属性和方法挂载到vue实例原型上,自然也就可以在某个js文件中拿到vue实例了。

关于如何实现在js文件中获取vue组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。