Javascript 嵌套的vue.js实例/元素_Javascript_Mvvm_Vue.js

Javascript 嵌套的vue.js实例/元素

javascript mvvm vue.js

Javascript 嵌套的vue.js实例/元素,javascript,mvvm,vue.js,Javascript,Mvvm,Vue.js,这听起来像一个真正的noob问题，但我对MVVM还很陌生。。。甚至是JS中的MVC，请提前道歉我正在玩vue.js，到目前为止我喜欢它的简单性。但是对于我正在尝试做的事情，我认为我需要用一种不同的方式去做我希望将Vue实例/元素嵌套在彼此内部，但当然，父级在init上读取DOM时将使用子级为了便于论证，下面是我的一个例子，我不是在做这样的事情，但这是最简单的方法来举例说明我的意思： <body> {{ message }} <div id="another

这听起来像一个真正的noob问题，但我对MVVM还很陌生。。。甚至是JS中的MVC，请提前道歉

我正在玩vue.js，到目前为止我喜欢它的简单性。但是对于我正在尝试做的事情，我认为我需要用一种不同的方式去做

我希望将Vue实例/元素嵌套在彼此内部，但当然，父级在init上读取DOM时将使用子级

为了便于论证，下面是我的一个例子，我不是在做这样的事情，但这是最简单的方法来举例说明我的意思：

<body>
    {{ message }}
    <div id="another">
        {{ message }}
    </div>
</body>

结果将是：

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类，当身体中发生事情时（在许多地方）会发生变化，但当然，我的身体也需要其他vue实例来做其他事情

我该怎么做筑巢呢？vue中是否有处理此问题的功能？我需要处理组件吗？或者，从子元素中获取主体（例如，像jQuery使用$（“body”）一样），然后在Vue实例中操作它

希望这个问题不要太愚蠢，有人能给我指出正确的方向

谢谢

想想组件。

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

通过道具传递数据只是一种方法。嵌套组件和从父级继承也可以很好地工作

例如：

您可以使用

标记执行此操作。这里有一个例子

1.首先，您需要创建一个基本布局组件，如下所示。您需要添加

标记。非常重要的一点是

标记上的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>

    `
});

3.将此示例代码放入HTML文件中。要在当前插槽中放置一些内容，只需在组件或标记中使用

插槽

属性

<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官方页面中的文档点击链接了解更多信息

下面是

中的示例，感谢您提及内联模板，解决了我的问题。非常感谢。

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

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