嵌套的vue.js实例/元素

Winter 2020.03.17

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

Mandy西门 2020.03.17

您可以使用<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

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

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

老丝GO 2020.03.17

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

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

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