嵌套的 vue.js 实例/元素答案

【问题标题】：Nested vue.js instances/elements嵌套的 vue.js 实例/元素
【发布时间】：2015-09-29 11:04:28
【问题描述】：

这听起来像是一个真正的菜鸟问题，但我对 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 实例来做其他事情。

我将如何进行嵌套？ vue中是否有处理这个问题的功能？我需要处理组件吗？或者，也许，从子元素中获取主体（例如，像 jQuery 使用 $("body")）然后在 Vue 实例中操作它？

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

谢谢

【问题讨论】：

标签： javascript mvvm vue.js

【解决方案1】：

您可以使用<slot> 标签来做到这一点。这是一个例子。

1.所以，首先，你需要做的是创建一个基本的布局组件，像这样。您需要在任何地方添加<slot> 标签。 <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.然后创建您的自定义组件。我创建了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中的示例

【讨论】：

【解决方案2】：

通过 props 传递数据只是一种方法。嵌套组件和从父组件继承也可以正常工作。

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

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

【讨论】：

感谢您提到 inline-template，解决了我的问题。谢谢！

【解决方案3】：

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

像上面那样在 body 上创建一个 Vue 实例，但是任何嵌套在其中的都是一个组件。通过 props 传递数据。

【讨论】：