嵌套的vue.js实例/元素

飞云乐2020-03-17

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

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

我想将Vue实例/元素相互嵌套，但是，当父在init上读取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类，当某物在体内（在许多地方）发生变化时，该类会发生变化，但是当然，我的身体还希望其他可以做其他事情的vue实例。

我将如何嵌套？Vue是否有功能可以解决此问题？我需要处理组件吗？或者，也许是从子元素中获取主体（例如jQuery会使用$（“ body”）），然后在Vue实例中对其进行操作？

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

谢谢

Winter2020/03/17 18:56:16

	export default {
		data (){
      return {}
		},
    props:{
      stepsArray:{
        type: Array,
        required: true,
        default: []
      },
      step:{
        type: Number,
        required: false,
        default : 1
      }
    }
	}

Mandy西门2020/03/17 15:03:35

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

1.So，首先，您需要做的是创建一个基本的布局组件，如下所示。您需要在<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.Put this sample code in your HTML file. To put some content in current slot, just use the slot attribute in your component or your tag.

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

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

Here is example in jsfiddle

蛋蛋路易2020/03/17 15:03:34

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

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

老丝GO2020/03/17 15:03:34

通过道具传递数据只是做到这一点的一种方法。嵌套组件和从父级继承也可以正常工作。

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer