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

由于您使用的是single file components（在Vue CLI生成的项目中为*.vue），因此您的项目已经具有模块化支持，因此您无需将属性/功能附加到{{1 }}对象。相反，您可以将静态属性/功能封装在组件文件本身中：

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

demo

Answer 2

您可以在vue数据或计算的属性中分配window.productDetailsRecommendationVue

1）将window.productDetailsRecommendationsVue从函数更改为

window.productDetailsRecommendationsVue = {
   //compositeNumbers: "I have no idea where this comes from but it could be passed separately",
    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
};

2）在index.js的vue实例内部，将window.productDetailsRecommendtionsVue分配给data属性：

new Vue({
  el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
  components: {
    Slider,
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
  data: {
    oldSliderData: window.productDetailsRecommendationsVue
  }
  template: '<product-slider></product-slider>'
});

现在可以使用标准的prop过程来访问组件。我不确定b / c的来源，我看不到它的导入。

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

2 个答案: