1

На днях начал изучать Vue.js

Прошу подсказать, по теме передачи данных из компонента в компонент.

Вопрос 1

Пример

…Шаблон…

<table>
<tr v-for=”das in data”>
<td v-for=”ny in das”>{{ ny }}</td>
</tr>
</table>

…Шаблон…

Значение ny – выводится, таблица строится.

При попытке вывести в ячейку данные через компонент не получается

…Шаблон…

<table>
<tr v-for=”das in data”>
<td v-for=”ny in das”><msgs v-bind:msg=”ny “</td>
</tr>
</table>

…Шаблон…

Значение ny – в компоненте выводится undefined

В обоих случаях data – входящие в текущий компонент данные, которые я передаю в следующий компонент.

props:
data: {
type: Array
default: [“dsfvdf”, “sdsdcdscd”,”sdcsdcsd”]
}

Вопрос 2 Не могу передать данные из массива faer в компонент

…Шаблон…

<table>
<tr v-for=”(das, index) in data”>
<td v-for=”ny in das”><msgs v-bind:msg=”ny“  v-bind:mass=”faer[index]“/> </td>
</tr>
</table>

…Шаблон…

faer - входящие в текущий компонент данные, которые я передаю в следующий компонент.

props:
faer: {
type: Array
default: [“121131”, “12121”,”1212121”]
}

- при передаче статических данных все получается.

1 ответ 1

1

Передача данных в компоненты осуществляется через входные параметры.

Входные параметры — это пользовательские атрибуты, которые вы можете установить на компоненте. Когда значение передаётся в атрибут входного параметра, оно становится свойством экземпляра компонента.

Простыми словами, чтобы осуществить передачу данных в компонент, нужно:

  1. Объявить входные параметры в компоненте, который будет принимать данные, допустим объявим msg и faer в props:

    Vue.component('msgs', {
     props: ['msg', 'faer'],
     template: `<div><p>{{msg}}</p><ul><li v-for="item in faer">{{item}}</li></ul> 
     </div>`
    })
    
  2. Теперь вы можете передавать данные в компонент msgs через пользовательские атрибуты, например передадим объявленные нами msg и faer:

    <msgs :msg="ny" :faer="faer[index]"></msgs>
    

Компонент может принимать столько входных параметров, сколько захотите, и по умолчанию любое значение может быть передано в любой входной параметр. В шаблоне выше вы увидите, что мы можем получить доступ к этому значению в экземпляре компонента, как и к любому свойству data

Более подробно о входных параметрах можете почитать здесь и здесь

Пример использования вышеизложенной информации в действии:

Vue.component('msgs', {
  props: ['msg', 'faer'],
  template: `<div><p>{{msg}}</p><ul><li v-for="item in faer">{{item}}</li></ul></div>`
})
new Vue({
  el: '#app',
  data: {
    data: [
      ['td 1 1', 'td 1 2', 'td 1 3'],
      ['td 2 1', 'td 2 2', 'td 2 3'],
    ],
    faer: [
      ['faer 1 1', 'faer 1 2', 'faer 1 3'],
      ['faer 2 1', 'faer 2 2', 'faer 2 3'],
    ]
  }
})
td {
  padding: 5px;
  background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <table>
    <tr v-for="(das, index) in data">
      <td v-for="ny in das">
        <msgs :msg="ny" :faer="faer[index]"></msgs>
      </td>
    </tr>
  </table>
</div>

4
  • Николай, спасибо. Представление о передаче вроде начинает формироваться, но не могли бы вы ещё дать уточнение. Вопрос. В компоненте msgs приём данных осуществляется, ок, как вы и указали. Проблема в том, что в компоненте в котором я вызываю компонент msgs я не могу выполнить пункт 2 ваших указаний: :msg="ny" :faer="faer[index]" в этом компоненте у меня нет функции data, а есть также входные параметры: props: data: {несколько объектов} которыми я наполняю цикл for для строки а потом получая объект в строке я начинаю наполнять ячейки. Commented 30 сент. 2020 в 11:15
  • Так вот если значение я просто вывожу в ячейку {{ ny }} все ок, а если это же значение я хочу передать в компонент msgs через v-bind, оно undefued в этом компоненте msgs, может нужно переменную ny Объявлять в data , но тогда как в массив faer передать индекс. } Commented 30 сент. 2020 в 11:16
  • Может так. Входной параметр используется для передачи начального значения; дочерний компонент хочет использовать его как локальное свойство данных в дальнейшем. В этом случае лучше всего определить локальное свойство в данных, которое использует значение входного параметра в качестве начального: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } Commented 30 сент. 2020 в 12:32
  • несмотря на количество вложений и уровень иерархии компонентов, вы всегда должны руководствоваться вышеизложенной информацией - передать данные через атрибуты дочернего компонента в родительском компоненте и обязательно объявить их в соответствующем дочернем компоненте (не в data, а в props), тогда в шаблоне дочернего компонента вы можете использовать эти данные как обычные свойства объекта data Commented 30 сент. 2020 в 15:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.