将几个静态属性引入Vue.js

Question

我是Vue.js的新手,我们正在努力将Vue.js逐个添加到现有项目中.我正在努力在Vue中重写产品滑块.它目前正在使用jquery光滑滑块.所以在html中的当前/旧代码中,这个js函数被调用:

function productDetailsRecommendations(compositeNumbers) {
  var params = {
    compositeNumbers: compositeNumbers,
    strategy: 'pp12',
    backupStrategy: 'popular',
    divId: 'recommendedProductsHorizontal',
    isVertical: false,
    isHideHeaderText: false,
    headerText: 'Guests Who Viewed This Item Also Viewed These',
    backupHeaderText: 'Popular Products',
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
  };

  createSlider(params);
}

现在我正在使用vue-carousel重新创建滑块.所以我用自己复制的函数替换了这个调用:productDetailsRecommendationsVue.

现在我创建了一个ProductRecommendationsSlider.vue作为滑块组件.我有一个index.js作为滑块初始化的入口点.

现在我的老板告诉我,我需要把productDetailsRecommendationsVue功能放进去index.js.

// index.js

import Vue from 'vue';
import axios from 'axios';
import VueCarousel from 'vue-carousel';
import Slider from '/components/slider/ProductRecommendationsSlider'

Vue.use(VueCarousel);

window.productDetailsRecommendationsVue=function(compositeNumbers) {
  var params = {
    compositeNumbers: compositeNumbers,
    strategy: 'pp12',
    backupStrategy: 'popular',
    divId: 'recommendedProductsHorizontal',
    isVertical: false,
    isHideHeaderText: false,
    headerText: 'Guests Who Viewed This Item Also Viewed These',
    backupHeaderText: 'Popular Products',
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
  };

};

/* eslint-disable no-new */
new Vue({
  el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
  components: {
    Slider,
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
  template: '<product-slider></product-slider>'
});

但我的主要问题是如何将这些参数放入组件中？

在其中一个功能中需要它们ProductRecommendationsSlider.vue.我的老板说我把js功能放在了正确的轨道上index.js.我在网上找到的所有教程都谈到了从头开始构建项目.将Vue与现有项目联系起来要比IMO困难得多.

Answer 1

由于您使用的是单个文件组件（*.vue在 Vue CLI 生成的项目中），因此您的项目已经具有模块化支持，因此您不需要将属性/函数附加到对象window。相反，您可以将静态属性/函数封装在组件文件本身中：

// ProductRecommendationsSlider.vue
<script>
function productDetailsRecommendations() {
  return { /*...*/ }
}

export default {
  data() {
    params: {}
  },
  methods: {
    loadParams() {
      this.params = productDetailsRecommendations();
    }
  }
}
</script>

或者在可以导入到组件中的单独文件中：

// ProductRecommendationsSlider.vue
<script>
import { productDetailsRecommendations } from '@/utils';

export default {
  data() {
    params: {}
  },
  methods: {
    loadParams() {
      this.params = productDetailsRecommendations();
    }
  }
}
</script>

// <root>/src/utils.js
export function productDetailsRecommendations() {
  return { /*...*/ }
}

然后，您可以将这些参数绑定到您的vue-carousel属性。请注意，示例中仅某些参数似乎受支持vue-carousel（由 标记为不支持n/a）：

"strategy": "pp12",                           // n/a
"backupStrategy": "popular",                  // n/a
"divId": "recommendedProductsHorizontal",     // ID of container div
"isVertical": false,                          // n/a
"isHideHeaderText": false,                    // true = hide `headerText` h3; false = show it
"headerText": "Guests Who Viewed This Item Also Viewed These",  // h3 text content (isHideHeaderText: true)
"backupHeaderText": "Popular Products",       // h3 text content (isHideHeaderText: false)
"itemsPerPage": 5,                            // vue-carousel perPage
"itemDisplayLimit": 10,                       // n/a
"numberOfItems": 15,                          // vue-carousel item count
"responseMap": null                           // n/a

数据绑定示例：

<template>
  <div class="product-slider" :id="params.recommendedProductsHorizontal">
    <h3 v-if="!params.isHideHeaderText">{{params.headerText}}</h3>
    <carousel :perPage="params.itemsPerPage">
      <slide v-for="i in params.numberOfItems" :key="i">
        <span class="label">{{i}}</span>
      </slide>
    </carousel>
    <section>
      <button @click="loadParams">Load params</button>
      <pre>params: {{params}}</pre>
    </section>
  </div>
</template>

演示