Może to brzmieć jak prawdziwe pytanie typu noob, ale jestem całkiem nowy dla MVVM ... lub nawet MVC w JS, więc przepraszam z góry.Zagnieżdżone instancje/elementy vue.js
Gram z vue.js i kocham prostotę tego do tej pory. Ale jeśli chodzi o to, co próbuję zrobić, myślę, że muszę podchodzić do tego inaczej.
Chcę zagnieżdżać instancje/elementy Vue w sobie nawzajem, ale oczywiście rodzic użyje wtedy dziecka, gdy czyta przez DOM na init.
Dla argumentów, poniżej jest przykładem tego, co mam na myśli, nie robię czegoś takiego, ale jest to najprostszy sposób na przykład o co mi chodzi:
<body>
{{ message }}
<div id="another">
{{ message }}
</div>
</body>
wtedy mój JS dla przykładem może być:
new Vue({
el: "body",
data: {
message: "I'm the parent"
}
});
new Vue({
el: "#another",
data: {
message: "I'm the child"
}
});
wynik byłby:
<body>
I'm the parent
<div id="another">
I'm the parent
</div>
</body>
teraz całkowicie understa I dlaczego tak się dzieje, i faktycznie powinien to zrobić, ale moim przykładem jest po prostu próbować zilustrować, jak zrobiłbym coś takiego?
W moim prawdziwym projekcie życia, mam v-klasę na moim ciele, która zmienia się, gdy coś dzieje się w ciele (w wielu miejscach), ale oczywiście moje ciało będzie również chciało innych instancji vue, które robią inne rzeczy.
Jak mam się zagnieżdżać? Czy w Vue istnieje funkcja, aby sobie z tym poradzić? Czy muszę zajmować się komponentami? A może pobrać ciało z elementu potomnego (np. Jak jQuery z $ ("body")), a następnie manipulować nim w instancji Vue?
Mam nadzieję, że to pytanie nie jest zbyt głupie i ktoś może wskazać mi właściwy kierunek.
Dzięki