Задать вопрос
Madeas
@Madeas
UI / UX Designer, Frontend Developer
javascript

Data в Vue.component?

Всем привет!
Нужен совет и помощь.

Есть разметка:
<nav id="navbar">
  <navigation></navigation>
  <p>Hello, World!</p>
  <other-components></other-components>
</nav>


Собираю компоненты:

Vue.component('navigation', {
  props: ['val'],
  data() {
    return {
      navlist: [
        { id: 'name-1', name: 'linkName-1'},
        { id: 'name-2', name: 'linkName-2'},
        { id: 'name-3', name: 'linkName-3'},
        { id: 'name-4', name:' linkName-4'},
        { id: 'name-5', name: 'linkName-5'}
      ]
    }
  },
  template: `
  <template v-for="val in navList" :key="val.id" :val="val">
    <ul>
      <li>
        <a :href=val.id  :title=val.name>{{ val.name }}</a>
      </li>
    </ul>
  </template>`
})

new Vue({ el: '#navbar' })


Несколько вопросов:
1. всегда ли нужно регистрировать new Vue, даже если инстанс уже задан в разметке?
2. в документации, vue.component может содержать шаблон, но не содержит data, следовательно, мой пример выше не верен и нужно перенести data() в vue-экземпляр? Но если я перенесу, обычная разметка <p>Hello, World!</p> пропадает.
3. подскажите, как тогда правильно записать структуру компонентов и экземпляра, чтобы все сработало?
  • Вопрос задан
  • 1861 просмотр
Комментировать
Подписаться 4 Простой Комментировать
Решения вопроса 2
potapchino
@potapchino
1. что значит регистировать? куда регистировать? где регистировать? вы о чем? пример приведите. можно хоть десять инстансов на странице сделать.
2. бред какой-то. почему не может то? вы конфиг компонента передаете в .component(). опция data является частью конфига.
но не содержит data
содержит, вроде и дата и шаблон есть
3. для начала объясните, что вы пытаетесь сделать. и объясните что по вашей субъективной терминологии есть компонент и экземпляр.
Ответ написан
6 комментариев
6 комментариев
Madeas
@Madeas Автор вопроса
UI / UX Designer, Frontend Developer
Решил

<div id="navbar">
  <block-navigation></block-navigation>
  <span>World!</span>
  <other-components></other-components>
</div>


Vue.component('block-navigation', {
    props: ['val'],
    data() {
      return {
        navlist: [
          { link: 'name-1', name: 'linkName-1' },
          { link: 'name-2', name: 'linkName-2' },
          { link: 'name-3', name: 'linkName-3' },
          { link: 'name-4', name: 'linkName-4' },
          { link: 'name-5', name: 'linkName-5' },
        ]
      }
    },
    template: `
    <ul>
    	<li 
      	v-for="val in navlist"
        :key="val.id">
        <a :href=val.link :title=val.name>{{ val.name }}</a>
      </li>
    </ul>
    `
  })

  new Vue({
    el: '#navbar'
  })
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@Hedy
1. Достаточно 1 раз создать экземляр в коде на статре приложения.
2. Компонент может содержать все возможные свойства и метода Vue в том числе и data.
3. Документация по компонентам максимально исчерпывающая: Основы компонентов
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать семантическое ядро + ТЗ копирайтеру для крупного сайта
23 апр. 2024, в 21:40
20000 руб./за проект
Реализовать редирект запросов в Chrome Extension Manifest v3
23 апр. 2024, в 21:14
1000 руб./за проект
Переместить сайт написанный на HTML, на python flask
23 апр. 2024, в 21:03
3000 руб./за проект
Ещё заказы