如何引用Vue组件中的全局函数？

我有一个Vue组件，它有一个'select state'下拉元素。我想添加一个js函数，用50个状态填充选项，而不必对它们进行硬编码。我还会在其他几个地方使用此下拉菜单，因此我希望从组件外部访问此功能。什么是完成这个最好的方法？如何引用Vue组件中的全局函数？

<template> 
    <div class="section" v-bind:class="sectionClass" data-mh="group3"> 
     <h3>{{sectionTitle}}</h3> 
     <div class="section-content display-area"> 
      <i class="icon icon-health img-left"></i> 
      <form> 
      <div class="row mt"> 
       <div class="col-xs-12 col-sm-8"> 
        <div class="same-height-parent"> 
         <div class="same-height"> 
          <input type="text" class="form-control" placeholder="Enter Name"> 
         </div>             
         <div class="same-height"> 
          <select name="state" id="state" class="form-control" tabindex="9"> 
           <option value="">- Select State -</option> 
          </select>              
         </div>             
        </div>            
        <!-- same-height-parent -->            
       </div>           
       <div class="col-xs-12 col-sm-4"> 
        <button type="submit" class="btn btn-success btn-block btn-fz20">Search</button> 
        </div>           
       </div>                  
      </form>         
     </div>    
    </div> 
</template> 

<script> 
    export default { 
     name: 'nameSearch', 
     data: function() { 
      return { 
       sectionTitle: 'Name Search'= 
      } 
     } 
    } 
</script>

来源

2017-06-15 Linx

查找包含状态的json文件，将其添加到您的项目并导入它。 –

这听起来像你可以做一个[混入]（https://vuejs.org/v2/guide/mixins.html） –

你可能想从其他文件中导出函数，这只是一种声明你想要的方式。

在其他一些文件

...

// utils.js 
export function createOptions (someArg) { 
    let options = [ ... ] 
    return options 
}

在.vue文件

<script> 
    import { createOptions } from './utils' 
    export default { 
    ... 
    data() { 
     return { 
     options: createOptions() 
     } 
    } 
    } 
</script>

你也可以试试snovakovic的建议外化下拉组件，而不是，随便给你带来更多的灵活性

来源

2017-06-15 21:56:00 fixmycode

这完美的工作，我需要什么，谢谢你！ – Linx

为什么不只是创建处理下拉列表的状态组件，然后将该组件包含在使用它的地方。

如果你只想要一个函数，然后创建js文件，该文件公开该函数并导入组件内的文件。

来源

2017-06-15 21:36:30 snovakovic

如何引用Vue组件中的全局函数？

回答

相关问题