我创建了一个包含 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
我的问题如下:在某些情况下,我的自定义组件是否会根据使用位置的不同而呈现不同的效果?。附带问题是“如果是,这是否正常且符合预期”
注意:我不想将此问题设为“家庭助理”问题(这不是提问的正确位置) - 而是想了解我写的内容是否可以被视为“ self ” contains”,一旦它在简单的 HTML 文件中工作,它就应该可以在任何地方工作 - 或者自定义元素 content 是否仍然依赖/取决于该元素的使用位置。 Home Assistant 恰好是这种行为差异发生的地方。
最佳答案
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);
关于javascript - 自定义组件中的connectedCallback()可以根据使用的上下文以不同的方式解释吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54042524/