如何在 Vue 组件（不带 Webpack）中使用非 Vue 自定义 Web 组件？

问题描述 投票：0回答：3

我有以下代码...

<html>
    <head></head>
    <body>
        <div id="app">
            {{ message }}
            <jrg-element></jrg-element>
        </div>
        <script type="module">
            import Vue from "//unpkg.com/vue/dist/vue.esm.browser.js";
            import {ShadowElement, CREATE_ELEMENT} from "//unpkg.com/@jrg/ui/target/jrg-ui.esm.mjs";
            class JrgElement extends ShadowElement {
                constructor() {
                    super("<h1>CustomElement</h1>");
                    this.render();
                }
            }
            CREATE_ELEMENT("jrg-element", JrgElement, {});
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
</html>

但是当我跑步时我得到......

如果我注释掉 Vue 部分，一切都会正常。如何在 Vue 中使用自定义元素？

更新

我尝试更新到...

CREATE_ELEMENT("jrg-element", JrgElement, {});
Vue.config.ignoredElements = ['jrg-element']
const app = new Vue({
    el: '#app',
    data: {
       message: 'Hello Vue!'
    }
});

但我还是明白...

结果是 Vue 元素渲染，但自定义元素不渲染。

完整代码

更新2

我尝试等待 dom 加载，就像......

document.addEventListener("DOMContentLoaded", function() {
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
});

但结果是一样的

vue.js
3个回答
0
投票

Vite 2 是这样的：

  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'jrg-element'
        }
      }
    })
  ],

来源：https://github.com/vitejs/vite/issues/1312

0
投票

Vue 模板（在您的情况下为 

app
div
的内容）由 Vue 模板编译器编译，并期望所有自定义元素都是 Vue 组件并正确注册。为了告诉 Vue 您正在使用一些非 Vue 自定义元素（Web Components API），您需要配置编译器。

Vue 2.x

Vue.config.ignoredElements = ['jrg-element']

Vue 3

const app = Vue.createApp({})
app.config.isCustomElement = tag => tag === 'jrg-element'

文档

0
投票

我也有同样的问题。然而，我发现我试图通过修改属性（例如 HTMLElement className）在构造函数中做太多事情。

将不仅仅是变量初始化的任何无关代码从 constructor() 移出并移至 attributeChangedCallback() 或connectedCallback() 中。这为我解决了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.