嵌套的 vue.js 实例/元素

Question

This may sound like a real noob question, but I'm pretty new to MVVM... or even MVC in JS, so sorry in advance.这听起来像是一个真正的菜鸟问题，但我对 MVVM 还是很陌生……甚至是 JS 中的 MVC，所以提前抱歉。

I'm playing about with vue.js, and loving the simplicity of it so far.我正在玩 vue.js，到目前为止，我很喜欢它的简单性。 But for what I am trying to do, I think I need to go about it a different way.但是对于我想做的事情，我认为我需要以不同的方式去做。

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.我想将 Vue 实例/元素相互嵌套，但是当然，当它在初始化时读取 DOM 时，父级将使用子级。

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>

Then my JS for example would be:那么我的 JS 例如将是：

new Vue({
    el: "body",
    data: {
        message: "I'm the parent"
    }
});

new Vue({
    el: "#another",
    data: {
        message: "I'm the child"
    }
});

The outcome would be:结果将是：

<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?现在我完全理解它为什么要这样做，事实上，它应该这样做，但我的例子只是试图说明我将如何做这样的事情？

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.在我的现实生活项目中，我的身体上有一个 v-class，当身体（在许多地方）发生事情时，它会发生变化，但当然我的身体也会需要其他 vue 实例来做其他事情。

how would I go about nesting?我将如何进行嵌套？ Is there feature in vue to deal with this? vue中是否有处理这个问题的功能？ Do I need to deal with components?我需要处理组件吗？ Or maybe, fetch the body from within a child element (eg like jQuery would with $("body")) then manipulate it within the Vue instance?或者，也许，从子元素中获取主体（例如，jQuery 会使用 $("body")）然后在 Vue 实例中操作它？

Hope this question isn't too stupid and someone can point me in the right direction.希望这个问题不是太愚蠢，有人可以指出我正确的方向。

Thanks谢谢

Answer 1

Think components.考虑组件。 http://vuejs.org/guide/components.html http://vuejs.org/guide/components.html

Create a Vue instance on the body as you have above, but anything nested in that is a component.像上面一样在 body 上创建一个 Vue 实例，但是嵌套在其中的任何东西都是一个组件。 Pass data via props.通过 props 传递数据。

Answer 2

Passing in data via props is only one way to do it.通过 props 传递数据只是一种方法。 Nesting components and inheriting from the parent works fine as well.嵌套组件和从父级继承也可以正常工作。

Example: http://jsfiddle.net/hajkrupo/3/示例：http: //jsfiddle.net/hajkrupo/3/

<encapsulated-component inline-template>
    <header>
        <cart-status></cart-status>
    </header>
    <cart></cart>
</encapsulated-component>

Answer 3

You can do this with <slot> tags.您可以使用<slot>标签来做到这一点。 Here is an example.这是一个例子。

1.So, first, you need to do is creating a basic layout component, like this. 1.所以，首先，你需要做的是创建一个基本的布局组件，像这样。 You need to add <slot> tag whereever you want.您需要在任意位置添加<slot>标签。 Very important think is the name attribute on <slot> tag.非常重要的是<slot>标签上的name属性。

var basicLayout = Vue.component("basic-layout", {
    template: `

    <div class="basic-layout">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>

    `
});

2.Then create your custom component. 2.然后创建您的自定义组件。 I created myHeader component to show you, how it works.我创建了myHeader组件来向您展示它是如何工作的。

var myHeader = Vue.component("my-header", {
    template: `

    <div class="header">
        <ul>
            <li>HOME</li>
            <li>ABOUT</li>
            <li>CONTACT</li>
        </ul>
    </div>

   `
});

3.Put this sample code in your HTML file. 3.将此示例代码放入您的 HTML 文件中。 To put some content in current slot, just use the slot attribute in your component or your tag.要将一些内容放在当前插槽中，只需在组件或标签中使用slot属性。

<div class="app">
  <basic-layout>
      <my-header slot="header"></my-header>

      <p>Content in &lt;main&gt; tag</p>

      <p slot="footer">Content in footer</p>
  </basic-layout>
</div>

4.The result will be like this: 4.结果会是这样的：

<div class="app">
    <div class="basic-layout">
        <header>
            <div class="header">
              <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>CONTACT</li>
              </ul>
            </div>
        </header>

        <main>
        <p>Content in &lt;main&gt; tag</p>
        <main>

        <footer>
            <p>Content in footer</p>
        </footer>
    </div>
</div>

Please, see the documentation in official page of Vue.js Just click link here for more info.请参阅 Vue.js 官方页面中的文档，只需单击此处的链接以获取更多信息。

Here is example in jsfiddle这是jsfiddle中的示例

嵌套的 vue.js 实例/元素

问题描述

3 个解决方案

解决方案1
7 2015-07-11 18:34:37

解决方案2
5 2015-07-23 14:53:15

解决方案3
1 2017-04-19 18:04:46

嵌套的 vue.js 实例/元素

问题描述

3 个解决方案

解决方案1 7 2015-07-11 18:34:37

解决方案2 5 2015-07-23 14:53:15

解决方案3 1 2017-04-19 18:04:46

解决方案1
7 2015-07-11 18:34:37

解决方案2
5 2015-07-23 14:53:15

解决方案3
1 2017-04-19 18:04:46