여러 정적 속성을 Vue.js로 끌어오기

여러 정적 속성을 Vue.js로 끌어오기

저는 Vue.js를 처음 접하기 때문에 기존 프로젝트에 Vue.js를 하나씩 추가하는 작업을 진행하고 있습니다.Vue에서 제품 슬라이더를 다시 쓰는 중입니다.현재 jquery slick 슬라이더를 사용하고 있습니다.따라서 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가 훨씬 더 어렵습니다.

단일 파일 컴포넌트를 사용하고 있기 때문에(*.vueVue CLI 생성 프로젝트 내)에는 이미 모듈화가 지원되므로 속성/함수를 에 부가할 필요가 없습니다.window물건.대신 컴포넌트 파일 자체에 정적 속성/함수를 캡슐화할 수 있습니다.

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

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

또는 컴포넌트로 Import할 수 있는 개별 파일에 저장:

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

데모

vue 데이터 또는 계산된 속성에서 window.productDetailsRecommendationVue를 할당할 수 있습니다.

1) 창을 변경합니다.product Details Recommendations 함수에서

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.productDetailsRecommendionsVue를 데이터 속성에 할당합니다.

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

이제 표준 프롭 프로세스를 사용하여 컴포넌트에 액세스할 수 있습니다.B/C에서 어디서 오는 건지 잘 모르겠어요. 수입된 건 아닌 것 같아요.

언급URL : https://stackoverflow.com/questions/52746435/pulling-in-several-static-properties-into-vue-js