Question

这听起来像是一个真正的noob问题，但我对MVVM很新......甚至是JS中的MVC，所以提前抱歉。

我正在玩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-class，当身体发生在身体（在很多地方）时会发生变化，但当然我的身体也会想要其他的vue实例来做其他事情。

我怎么去筑巢？是否有特色处理这个问题？我需要处理组件吗？或者，从子元素中获取正文（例如jQuery会使用$（“body”））然后在Vue实例中操作它？

希望这个问题不是太愚蠢，有人可以指出我正确的方向。

由于

Answer 1

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

如上所示在主体上创建Vue实例，但嵌套在其中的任何内容都是一个组件。通过道具传递数据。

Answer 2

通过道具传递数据只是一种方法。嵌套组件和继承父组件也很好。

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

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

Answer 3

您可以使用<slot>标记执行此操作。这是一个例子。

1.首先，您需要做的是创建一个基本的布局组件，就像这样。您需要随时添加<slot>标记。非常重要的是<slot>标记上的名称属性。

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.然后创建自定义组件。我创建了myHeader组件来向您展示它是如何工作的。

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

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

   `
});

3.将此示例代码放在HTML文件中。要将一些内容放在当前插槽中，只需使用组件或标记中的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.结果如下：

<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>

请参阅Vue.js官方页面中的文档只需点击链接here即可获取更多信息。

以下是jsfiddle

中的示例

嵌套的vue.js实例/元素

3 个答案: