如何在使用 Vue 3 UMD 构建的 HTML 单个文件中使用 Vue 2 组件

Question

我正在尝试在 Vue 3 单个本地 HTML 文件中使用https://vue-treeselect.js.org/ （具有嵌套选项的多选组件）（我不想将 Vue CLI 用于此特定任务)，使用独立的 UMD 构建 Vue 2，它的工作方式如下（如文档中所示）：

<html>
  <head>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
  </head>
  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
  </body>
  <script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)

    new Vue({
      el: '#app',
      data: {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      },
    })
  </script>
</html>

如何使用 Vue 3 的 UMD 构建来做同样的事情？

我尝试将脚本行从 Vue 2 切换到 Vue 3，并像这样在 data() 中添加值和选项变量（但不识别新的 treeselect 标记）：

<html>

<head>
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>

<body>
    <div id="app">
        <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
</body>

<script>

    const app = Vue.createApp({

        data() {
            return {
                value: null,
                // define options
                options: [{
                    id: 'a',
                    label: 'a',
                    children: [{
                        id: 'aa',
                        label: 'aa',
                    }, {
                        id: 'ab',
                        label: 'ab',
                    }],
                }, {
                    id: 'b',
                    label: 'b',
                }, {
                    id: 'c',
                    label: 'c',
                }],
            };
        }


    })

    app.component('treeselect', VueTreeselect.Treeselect)
    app.mount('#app')

</script>

</html>

Answer 1

此组件似乎尚不支持Vue.js 3。

如何在使用 Vue 3 UMD 构建的 HTML 单个文件中使用 Vue 2 组件

问题描述

1 个解决方案

解决方案1
1 2021-01-28 11:05:18

如何在使用 Vue 3 UMD 构建的 HTML 单个文件中使用 Vue 2 组件

问题描述

1 个解决方案

解决方案1 1 2021-01-28 11:05:18

解决方案1
1 2021-01-28 11:05:18