Data в Vue.component?

Question

[Andrej Sharapov]

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

Есть разметка:

<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. подскажите, как тогда правильно записать структуру компонентов и экземпляра, чтобы все сработало?

Answer 1

[alex]

1. что значит регистировать? куда регистировать? где регистировать? вы о чем? пример приведите. можно хоть десять инстансов на странице сделать.
2. бред какой-то. почему не может то? вы конфиг компонента передаете в .component(). опция data является частью конфига.

но не содержит data

содержит, вроде и дата и шаблон есть
3. для начала объясните, что вы пытаетесь сделать. и объясните что по вашей субъективной терминологии есть компонент и экземпляр.

Comments

[Andrej Sharapov]

Сорри, если запутал. напишу проще.
3.

что по вашей субъективной терминологии

экземпляр - new Vue
компонент - Vue.component
регистрация

1.

что значит регистировать?

значит, что после создания компонента обязательно нужно писать "родителя" или "инстанс" в котором он находится. В данном случае new Vue({ el: '#navbar' })

2. пример я видел, он работает, но почему-то в моем примере не срабатывает. Работает только с условием, если я переношу template в new Vue. Т.е. шаблон в компоненте не работает. Отсюда и вопросы.

[Andrej Sharapov]

Нашел ошибки

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'
  })

Все работает.

[alex]

Andrej Sharapov, 1. - ну вам же надо как-то примонтировать созданный инстанс к дому, так? вам явно нужно укзать дом-ноду к которой прицепится vue. не обязательно el указывать можно вот так:

const myApp = new Vue({ ... })

myApp.$mount(document.querySelector('#app'))
myApp.$mount('#app')

[Andrej Sharapov]

Alex, я так понял, что обязательно и не важно каким образом. Я может просто туплю)) Вопрос возник из-за того, что компонент отсюда Vue.component('block-navigation', ... уже есть в html

<div id="navbar"> <block-navigation></block-navigation> ...

[alex]

Andrej Sharapov, и что что он там есть. корневой компонент то вам нужно куда-то примонтировать. опция el только для корневого комопнента имеет смысл

[Andrej Sharapov]

Alex, да, вы правы. уже разобрался. Спасибо за конструктивную критику, она бывает полезной.

Answer 2

[Andrej Sharapov]

Решил

<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'
  })

Comments

[Ihor Bratukh]

У вас props val имеет одинаковое название с элементом цикла, закончилась фантазия или фича?

Answer 3

[Hedy]

1. Достаточно 1 раз создать экземляр в коде на статре приложения.
2. Компонент может содержать все возможные свойства и метода Vue в том числе и data.
3. Документация по компонентам максимально исчерпывающая: Основы компонентов