Передача данных в компонент vue.js

Question

На днях начал изучать 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”]
}

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

Answer 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>`
})
```
Теперь вы можете передавать данные в компонент 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>

БЛОГ НА HUSL

Передача данных в компонент vue.js

Ответы (1 шт):