Question

我创建了一个包含Vue实例的自定义组件：

class ContentCardExample extends HTMLElement {
  connectedCallback() {
    const card = document.createElement('div');
    card.setAttribute("id", "app")
    card.innerHTML = 'hello is {{hello}}'
    this.appendChild(card);
    new Vue({
      el: "#app",
      data: {
        hello: 5
      }
    })
  }
}

customElements.define('content-card-example', ContentCardExample);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<content-card-example></content-card-example>

独立（即-直接在浏览器中的上面的片段中使用）可以正常工作

然后我尝试将其添加到Home Assistant中，该方法提供了一种通过创建“自定义元素”来创建自定义卡的方法，然后由Home Assistant显示。

在Home Assistant中使用相同的代码会产生Vue警告（有效-错误）：Cannot find element #app

我的问题如下：在某些情况下，根据使用位置的不同，我的自定义组件的呈现方式会有所不同吗？。附带的问题是“如果是，这是正常现象吗？”

注意：我不想让这个问题成为“家庭助理”的问题（这不是问这个问题的正确位置）-而是要了解我写的内容是否可以视为“自我”包含”，并且一旦在简单的HTML文件中运行，它就可以在任何地方使用-或者自定义元素 content 是否仍然依赖于/取决于该元素的使用位置。家庭助手恰好是发生这种行为差异的地方。

Answer 1

Vue实例找不到#app。您可以将card元素直接传递给el。我使用了一个名为vm的变量，稍后再调用vue实例，并使用vm.$el将其附加到您的DOM中。

尝试一下：

class ContentCardExample extends HTMLElement {
  connectedCallback() {
    const card = document.createElement('div');

    card.innerHTML = 'hello is {{hello}}';

    const vm = new Vue({
      el: card,
      data: {
        hello: 5
      }
    });

    this.appendChild(vm.$el);
  }
}

customElements.define('content-card-example', ContentCardExample);

可以根据使用它的上下文以不同的方式来解释自定义组件中的connectedCallback（）吗？

1 个答案: