Question

我有一个具有“选择状态”的Vue组件。下拉元素。我想添加一个js函数，用50个状态填充选项，而不是硬编码。我还将在其他几个地方有这个下拉列表，所以我希望从组件外部访问此功能。实现这一目标的最佳方法是什么？

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

您可能还想尝试使用snovakovic的建议来替代下拉组件，无论为您带来更多灵活性

Answer 2

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

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

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

2 个答案: