Возможно ли так вложить компоненты на VUE?

Question

Дело в том что эти 2 компонента вообще никак между собой не связанны, и им лучше сделать разные области видимости и отдельно отлаживать. Один отвечает за поиск и заказ товара. Вложенный за связь с оператором. И на странице они расположены один в другом. При попытке это сделать - при подключеннии второго компонента выдается ошибка - не найден компонент с таким id. Сделать в в виде подключаемого компонента нельзя - есть страницы с Vue, есть просто генерируемые видами Yii2. Но компонент обратной связи должен быть на тех и на других. На страницах без Vue - он нормально работает.

<script>

new Vue({
    el: '#component_first'
    ...
    });

new Vue({
    el: '#component_second'
    ...
});

</script>

<div id="component_first">
    ...
    <div id="component_second">
        ...
    </div>
    ...
</div>

Answer 1

У меня только так получается. Но надо будет написать какую-нибудь абстракцию, чтобы компоненты ничего не знали друг о друге

const second = new Vue({
  el: '#second',
  data() {
    return {
      btnName: 'second'
    }
  },
  methods: {
    handlerSecond() {
      console.log('second')
    }
  },
});

const first = new Vue({
  el: '#first',
  data() {
    return {
      btnName: 'first'
    }
  },
  methods: {
    handlerFirst() {
      console.log('first')
    }
  },
  mounted() {
    const id = second.$el.getAttribute('id')
    const replaceElem = document.getElementById(id)
    this.$el.replaceChild(second.$el, replaceElem);
  }
});

div {
  border: 1px solid;
  max-width: 200px;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}

 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="first" @click="handlerFirst">
  {{btnName}}
  <div id="second" @click.stop="handlerSecond">{{btnName}}</div>
</div>

БЛОГ НА HUSL

Возможно ли так вложить компоненты на VUE?

Ответы (1 шт):