Передача массивов и сложных объектов

Последнее обновление: 03.11.2020

Отдельно рассмотрим передачу в компонент через props сложных объектов и массивов.

Например, передадим сложный объект:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="text" v-model="user.name" /><br><br>
    <input type="number" v-model.number="user.age" /><br><br>
    <user-info v-bind:user="user"></user-info>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({
    data(){
        return { 
			user: {
				name: 'Tom',
				age: 18
			}
		}
    }
});
 
app.component('user-info', {
  props: ["user"],  //как альтернатива  props: {user: Object}
  template: `<div>
                <h2>User</h2>
                <p>Name: {{user.name}}</p>
                <p>Age: {{user.age}}</p>
            </div>`
});
app.mount('#app');
</script>
</body>
</html>

Здесь компонент получает данные в целом именно как один объект user. И после этого в шаблоне компонента можно обращаться к свойствам этого объекта через user.name и user.age.

Передача сложных объектов JavaScript через Props в компонент в Vue 3

Но если мы не передадим значение для свойства user из props:

<user-info></user-info>

То в этом случае свойство user в компоненте будет неопределено, и программа завершит свою работу с ошибкой. В этом случае мы можем предусмотреть значение по умолчанию для этого свойства с помощью параметра default. При этом для сложных объектов, а также для массивов этот параметр должен представлять функцию, которая возращает начальное значение для свойства.

В частности, изменим компонент следующим образом:

app.component('user-info', {
  props: {
        user: {
            type: Object,
            default: function(){
                return  {
                    name: 'Bob',
                    age: 22
                }
            }
        }
  },
  template: `<div>
                <h2>User</h2>
                <p>Name: {{user.name}}</p>
                <p>Age: {{user.age}}</p>
            </div>`
});

Теперь если извне не передается значение для props, программа будет использовать значение по умолчанию.

Массивы

Рассмотрим передачу массивов:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <userslist :users="users"></userslist>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({
    data(){
        return { 
			users: [{
            name: 'Tom',
            age: 18
        },{
            name: 'Bob',
            age: 23
        },{
            name: 'Alice',
            age: 21
        }]
		}
    }
});
 
app.component('userslist', {
  props: ["users"],
  template: `<ul>
                <li v-for="user in users">
                    <p>Name: {{user.name}}</p>
                    <p>Age: {{user.age}}</p>
                </li>
            </ul>`
});
app.mount('#app');
</script>
</body>
</html>

Здесь извне компоненту передается массив users, состоящий из сложных объектов. В компоненте мы можем с помощью директивы v-for пробежаться по всему массиву и получить отдельные его элементы.

Передача массивов объектов через свойство props в компонент Vue 3

Также можно выполнить более точную настройку свойства users, например, задать для него значение по умолчанию:

app.component('userslist', {
	props: {
		users:{
			type: Array,
			default: function(){
				return []
			}
		}
	},
	template: `<ul>
				<li v-for="user in users">
					<p>Name: {{user.name}}</p>
					<p>Age: {{user.age}}</p>
				</li>
			</ul>`
});

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850