Vueコンポーネントでグローバル関数を参照する方法は？

Question

私は 'select state'ドロップダウン要素を持つVueコンポーネントを持っています。私はそれらをハードコードするのではなく、50の状態でオプションを設定するjs関数を追加したいと思います。私はまた、このドロップダウンをいくつかの場所に持っていますので、コンポーネントの外部からこの関数にアクセスする必要があります。これを達成する最良の方法は何ですか？

<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> 

Answer 1

他のファイルから関数をエクスポートすることもできますが、これは単純に目的のとおりに宣言する場合です。他のいくつかのファイルに

...

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

あなた.vueファイル内

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

また、あなたに多くの柔軟性をもたらすものは何でも、代わりにドロップダウンコンポーネントをexternaliseするsnovakovicのアドバイスを試してみたいことがあります

Answer 2

理由だけではなく、ドロップダウンを扱う状態コンポーネントを作成していないし、それが使われているところどこでも、そのコンポーネントが含まれています。

関数だけが必要な場合は、その関数を公開するjsファイルを作成し、そのファイルをコンポーネント内にインポートします。