Vuejs несколько компонентов без Webpack

Question

У меня есть веб-сайт с таблицами статических цен Я пытаюсь преобразовать их в несколько компонентов в Vuejs. Таким образом, страница 1 будет иметь компонент 1, отображающий цены для этой конкретной страницы, страница 2 будет иметь свой собственный компонент и так далее. Я создал шаблон с тегом <template id="abc"></template>. Ниже приведен код:

Vue.component('pb-wp', {
template:'#package1',
data: function(){
    return {
          package1: [
            {
              id: '4',
              name: 'Some title 1',
              priceNew: 249,
              priceOld: 399
            },
            {
              id: '5',
              name: 'Some title 2',
              priceNew: 249,
              priceOld: 399
            }
    ],
    package2: [
                        {
                        id: '3',
                        name: 'Some New title 1',
                        priceNew: 249,
                        priceOld: 399
                      },
                      {
                        id: '2',
                        name: 'Some New title 2',
                        priceNew: 249,
                        priceOld: 399
                      }
        ],
    }
}
});

new Vue({
 el: '#pricing'
});

В HTML:

<pb-wp></pb-wp>

Могу ли я передать несколько экземпляров в шаблоне и Vue.component, например:

Vue.component('pb-wp', 'pb-wp2' {
template:['#package1', '#package2'],
data: function(){
    return {...}
}
});

Answer 1

Вместо помещения данных для каждого экземпляра таблицы калькуляции в ваш компонент, сделайте компонент независимым от данных и поместите данные в родительский экземпляр Vue, который вызывает компонент.

например. измените объявление компонента следующим образом:

Vue.component('pb-wp', {
    template:'#package',
    props: {
        package: {
            type: Object,
            default: null,
        }
    }
});

Тогда у вас есть пакет, который может выглядеть примерно так:

<script type="text/x-template" id="package">
    <div v-if="package">
        <h1>{{ package.name }}</h1>
        <div>
            Price: {{ package.priceNew }} 
            <span style="text-decoration: line-through">{{  package.priceOld }}
        </div>
    </div>
</script>

Пример Vue, как это, с данными

new Vue({
    el: '#pricing',
    data: function() {
        return {
            package1: [
                {
                  id: '4',
                  name: 'Some title 1',
                  priceNew: 249,
                  priceOld: 399
                },
                {
                  id: '5',
                  name: 'Some title 2',
                  priceNew: 249,
                  priceOld: 399
                }
            ],
            package2: [
                {
                    id: '3',
                    name: 'Some New title 1',
                    priceNew: 249,
                    priceOld: 399
                },
                {
                    id: '2',
                    name: 'Some New title 2',
                    priceNew: 249,
                    priceOld: 399
                }
            ],
        }
    }
});

А затем в HTML вы можете использовать компоненты с данными

<div id="pricing">
    <h2>All Packages from 'package1'</h2>
    <div v-for="package, index in package1" :key="package.id + index">
        <pb-wp :package="package"></pb-wp>
    </div>
    <h2>All Packages from 'package2'</h2>
    <div v-for="package, index in package2" :key="package.id + index">
        <pb-wp :package="package"></pb-wp>
    </div>
</div>

Надеюсь, это поможет прояснить, как работают компоненты Vue. Для справки см .:

https://vuejs.org/v2/guide/components-registration.html

https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates