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

Question

I'm trying to use https://vue-treeselect.js.org/ (multi-select component with nested options) in a Vue 3 single local HTML file (I don't want to use the Vue CLI for this specific task), using the standalone UMD build Vue 2, it works as it follows (as showed in the docs):我正在尝试在 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>

How can I do the same using the UMD build for Vue 3?如何使用 Vue 3 的 UMD 构建来做同样的事情？

I tried it switching the script line from Vue 2 to Vue 3, and adding the value and option variables inside data() like this (but does not recognize the new treeselect tag):我尝试将脚本行从 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

It seems that Vue.js 3 is not supported yet by this components.此组件似乎尚不支持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