无模板的组件

Posted 2023-02-22

【中文标题】无模板的组件

【英文标题】：Component without template

【发布时间】：2018-09-26 23:39:16

【问题描述】：

我有一些代码可以对服务器进行 api 调用并返回一些 JSON。

它确实作为我的组件中的一种方法存在，但由于它有点长，我想将它提取到它自己的文件中

在 vuejs 中，这里的最佳实践是什么。

应该是没有模板的组件吗？这将如何运作？

我会创建一个 es6 模块吗？

【参考方案1】：

我建议在这里使用 mixin。

在 myCoolMixin.js 之类的文件中定义你的 mixin...

export default 
   methods: 
      myAwesomeMethod() 
         //do something cool...
      
   

你可以像组件一样在 mixin 中定义任何东西。例如数据对象、计算或监视属性等。然后您只需将 mixin 包含在您的组件中。

import myCoolMixin from '../path/to/myCoolMixin.js'

export default 
   mixins: [myCoolMixin],
   data: function() 
      return: 
         //... 
      
    ,
    mounted: function() 
       this.myAwesomeMethod(); // Use your method like this!  
    
 

在此处了解有关 Mixins 的更多信息：https://vuejs.org/v2/guide/mixins.html

【讨论】：

关于 mixins 的重要说明：它影响所有组件和子组件。虽然它用作项目的全局库（仅限方法），但在 mixin 的“已安装”或“创建”挂钩中进行处理将执行该处理脚本的次数与所有已安装入口点的加载组件和子组件的数量一样多

@Raywell 您将此与global mixin 混淆了。如果您像在这个答案中一样添加 mixin - 通过mixins: [myCoolMixin] - 那么它只会被添加到该组件中。

【参考方案2】：

混合工作，或者你可以创建一个插件。这是文档示例：

MyPlugin.install = function (Vue, options) 
  // 1. add global method or property
  Vue.myGlobalMethod = function () 
    // something logic ...
  

  // 2. add a global asset
  Vue.directive('my-directive', 
    bind (el, binding, vnode, oldVnode) 
      // something logic ...
    
    ...
  )

  // 3. inject some component options
  Vue.mixin(
    created: function () 
      // something logic ...
    
    ...
  )

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) 
    // something logic ...
  

Vue Plugins

【讨论】：

喜欢答案，肯定会研究插件，但我认为 mixins 更适合这里。谢谢。

我个人倾向于使用 mixins，只有当我有大量功能集共享commanity 时我才会选择插件