嵌套的vue.js实例/元素 [英] Nested vue.js instances/elements
问题描述
这听起来像是一个真正的noob问题，但我对MVVM很新......甚至是JS中的MVC，所以提前抱歉。
This may sound like a real noob question, but I'm pretty new to MVVM... or even MVC in JS, so sorry in advance.
I我正在玩vue.js，并且喜欢它到目前为止的简单性。但是对于我想要做的事情，我认为我需要采用不同的方式。
I'm playing about with vue.js, and loving the simplicity of it so far. But for what I am trying to do, I think I need to go about it a different way.
我想将Vue实例/元素嵌套在彼此内部，但是当然，父母将在初始化时通过DOM读取子进程。
I want to nest Vue instances/elements inside each other, but of course, the parent will then use the child when it reads through the DOM on init.
为了论证，下面是我的意思的一个例子，我是没有做这样的事情，但这是我说的最简单的方法：
For the sake of arguments, below is an example of what I mean, I am not doing anything like this, but this is the simplest way to example what I mean:
<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>
现在我完全理解为什么会这样做，事实上，它应该这样做，但我的例子我只是试图说明我将如何做这样的事情？
Now I completely understand why it is doing this and in fact, it should do this, but my example is just trying to illustrate how I would do something like this?
在我的现实生活项目中，我的身体上有一个v-class，当事情发生在我身上时会发生变化身体（在很多地方）但当然我的身体也会想要其他东西的其他实例。
In my real life project, I have a v-class on my body that changes when stuff happens in the body (in numerous places) but of course my body will also want other instances of vue that do other stuff.
我将如何进行筑巢？是否有特色处理这个问题？我需要处理组件吗？或者，从子元素中获取正文（例如jQuery会使用$（body））然后在Vue实例中操作它？
how would I go about nesting? Is there feature in vue to deal with this? Do I need to deal with components? Or maybe, fetch the body from within a child element (e.g. like jQuery would with $("body")) then manipulate it within the Vue instance?
希望这个问题并不是太愚蠢，有人可以指出我正确的方向。
Hope this question isn't too stupid and someone can point me in the right direction.
谢谢
推荐答案
思考组件。
http://vuejs.org/guide/components.html
如上所述在主体上创建一个Vue实例，但嵌套在其中的任何东西都是一个组件。通过道具传递数据。
Create a Vue instance on the body as you have above, but anything nested in that is a component. Pass data via props.
这篇关于嵌套的vue.js实例/元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
