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 для строки а потом получая объект в строке я начинаю наполнять ячейки. 30 сен 2020 в 11:15
  • Так вот если значение я просто вывожу в ячейку {{ ny }} все ок, а если это же значение я хочу передать в компонент msgs через v-bind, оно undefued в этом компоненте msgs, может нужно переменную ny Объявлять в data , но тогда как в массив faer передать индекс. } 30 сен 2020 в 11:16
  • Может так. Входной параметр используется для передачи начального значения; дочерний компонент хочет использовать его как локальное свойство данных в дальнейшем. В этом случае лучше всего определить локальное свойство в данных, которое использует значение входного параметра в качестве начального: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 30 сен 2020 в 12:32
  • несмотря на количество вложений и уровень иерархии компонентов, вы всегда должны руководствоваться вышеизложенной информацией - передать данные через атрибуты дочернего компонента в родительском компоненте и обязательно объявить их в соответствующем дочернем компоненте (не в data, а в props), тогда в шаблоне дочернего компонента вы можете использовать эти данные как обычные свойства объекта data 30 сен 2020 в 15:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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