Question

我正在开发一个需要在某些领域使用某些vue组件的php / laravel项目。目前，我的vue组件如下所示：

import Vue from 'vue';

import Notification from "./components/Notification.vue";

window.onload = function () {
   var main = new Vue({
      el: '#my-app',
      components: { Notification }
   });
}

但是，在我没有＃my-app元素的网页上，我收到以下错误：

[Vue warn]: Cannot find element: #my-app

有没有办法阻止此警告？问这个的另一种方法是，有没有办法在我需要它的页面上使用我的通知组件，通过创建一个＃my-app元素而在页面上没有＃my-app元素我不需要它？

或者，如果我理解正确，我需要root＃my-app元素，无论我是否使用Notification组件？

Answer 1

您可以在安装Vue之前动态创建id为my-app的元素。

import Vue from 'vue';

import Notification from "./components/Notification.vue";

var myAppElement = document.getElementById('my-app');

if (!myAppElement) {
   var newMyAppElement = document.createElement('div');
   newMyAppElement.setAttribute('id', 'my-app');
}

window.onload = function () {
    var main = new Vue({
    el: '#my-app',
    components: { Notification }
});

Answer 2

我这样解决了。我只会在检测到#app时实例化Vue：

//only use Vue when #app detected
window.onload = function () {
    var app = document.getElementById('app');
    if (app) {
        const app = new Vue({
            el: '#app',
        });
    }
};

Answer 3

创建一个元素然后将组件安装到该元素很简单。

document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('notification'))
  const app = new Vue({
    el,
    render: h => h(Notification)
  })
})

Vue组件按需 - [Vue警告]：找不到元素

3 个答案: