没有 Webpack 的 Vuejs 多组件答案

【问题标题】：Vuejs Multiple Components without Webpack没有 Webpack 的 Vuejs 多组件
【发布时间】：2019-03-31 06:21:01
【问题描述】：

我有一个包含静态定价表的网站。我正在尝试将它们转换为 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 {...}
}
});

【问题讨论】：

标签： vuejs2 vue-component

【解决方案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

【讨论】：