Вложенные экземпляры / элементы vue.js
Это может звучать как настоящий вопрос, но я довольно новичок в MVVM ... или даже в MVC в JS, поэтому заранее извините.
Я играю с vue.js и до сих пор люблю эту простоту. Но для того, что я пытаюсь сделать, я думаю, что мне нужно пойти по-другому.
Я хочу вложить экземпляры / элементы Vue друг в друга, но, конечно, родитель будет использовать дочерний элемент, когда он читает DOM при инициализации.
Для аргументов ниже приведен пример того, что я имею в виду, я не делаю ничего подобного, но это самый простой способ показать, что я имею в виду:
<body>
{{ message }}
<div id="another">
{{ message }}
</div>
</body>
Тогда мой JS, например, будет:
new Vue({
el: "body",
data: {
message: "I'm the parent"
}
});
new Vue({
el: "#another",
data: {
message: "I'm the child"
}
});
Результатом будет:
<body>
I'm the parent
<div id="another">
I'm the parent
</div>
</body>
Теперь я полностью понимаю, почему он это делает, и на самом деле, он должен это делать, но мой пример просто пытается проиллюстрировать, как я мог бы сделать что-то подобное?
В моем реальном жизненном проекте у меня есть v-класс на моем теле, который меняется, когда в теле происходят вещи (во многих местах), но, конечно, мое тело также будет хотеть другие экземпляры vue, которые делают другие вещи.
как бы я занялся вложением? Есть ли особенность в том, чтобы справиться с этим? Нужно ли иметь дело с компонентами? Или, может быть, получить тело из дочернего элемента (например, как jQuery с $ ("body")), а затем манипулировать им внутри экземпляра Vue?
Надеюсь, этот вопрос не слишком глуп, и кто-то может указать мне правильное направление.
Спасибо