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

Это может звучать как настоящий вопрос нообата, но я довольно новичок в MVVM ... или даже MVC в JS, поэтому извините заранее.Вложенные vue.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>

Теперь я полностью understa почему он это делает и на самом деле, он должен это делать, но мой пример просто пытается проиллюстрировать, как я буду делать что-то подобное?

В моем проекте реальной жизни у меня есть v-класс на моем теле, который меняется, когда что-то происходит в теле (во многих местах), но, конечно, мое тело также хочет, чтобы другие экземпляры vue делали другие вещи.

как я могу погулять? Есть ли функция в vue, чтобы справиться с этим? Нужно ли мне иметь дело с компонентами? Или, может быть, получить тело из дочернего элемента (например, как jQuery будет с $ ("body")), а затем манипулировать им в экземпляре Vue?

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

Thanks

источник

2015-07-10 keogh

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

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

источник

2015-07-11 18:34:37 Fergal

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

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

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

источник

2015-07-23 14:53:15 swift

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

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

<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

источник

2017-04-19 18:04:46 riverside256

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

ответ

Смежные вопросы