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

【问题标题】：How do I use a Vue 2 component in a HTML single file that uses Vue 3 UMD build如何在使用 Vue 3 UMD 构建的 HTML 单个文件中使用 Vue 2 组件
【发布时间】：2021-01-28 10:54:59
【问题描述】：

我正在尝试在 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() 中添加 value 和 option 变量（但不识别新的 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>

【问题讨论】：

标签： javascript html vue.js vuejs2 vuejs3

【解决方案1】：

看来 Vue.js 3 is not supported yet 是由这个组件组成的。

【讨论】：