Вложенные экземпляры/элементы vue.js

Это может звучать как настоящий вопрос нообата, но я довольно новичок в MVVM... или даже MVC в JS, поэтому извините заранее.

Я играю с vue.js и люблю его простоту. Но для того, что я пытаюсь сделать, я думаю, мне нужно пойти по-другому.

Я хочу вставлять экземпляры/элементы Vue внутри друг друга, но, конечно, родитель будет потом использовать дочерний элемент, когда он читает DOM в init.

Для аргументов ниже приведен пример того, что я имею в виду, я не делаю ничего подобного, но это самый простой способ, например, что я имею в виду:

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

Надеюсь, этот вопрос не слишком глуп, и кто-то может указать мне в правильном направлении.

Спасибо

Ответ 1

Подумайте о компонентах. http://vuejs.org/guide/components.html

Создайте экземпляр Vue на теле, как вы уже выше, но что-то вложенное в это компонент. Передавайте данные через реквизиты.

Ответ 2

Передача данных через опоры - это только один способ сделать это. Вложенные компоненты и наследование от родителя прекрасно работают.

Пример: http://jsfiddle.net/hajkrupo/3/

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

Ответ 3

Вы можете сделать это с помощью тегов <slot>. Вот пример.

1. Итак, сначала вам нужно создать базовый компонент компоновки, например. Вам нужно добавить тег <slot>, который вы хотите. Очень важным является атрибут name в теге <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 Просто нажмите ссылку здесь для получения дополнительной информации.

Вот пример в jsfiddle