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

没有Webpack的Vuejs多个组件

1 个答案: