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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</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>
    <userinfo v-bind:user="user"></userinfo>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('userinfo', {
  props: ["user"],	//как альтернатива  props: {user: Object}
  template: `<div>
				<h2>User</h2>
				<p>Name: {{user.name}}</p>
				<p>Age: {{user.age}}</p>
			</div>`
});
new Vue({
    el: "#app",
    data: {
        user: {
			name: 'Tom',
			age: 18
        }
    }
});
</script>
</body>
</html>

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

Props object in component in Vue.js

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

<userinfo></userinfo>

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

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

Vue.component('userinfo', {
  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.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <userslist :users="users"></userslist>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('userslist', {
  props: ["users"],
  template: `<ul>
				<li v-for="user in users">
					<p>Name: {{user.name}}</p>
					<p>Age: {{user.age}}</p>
				</li>
			</ul>`
});
new Vue({
    el: "#app",
    data: {
        users: [{
			name: 'Tom',
			age: 18
        },{
			name: 'Bob',
			age: 23
		},{
			name: 'Alice',
			age: 21
		}]
    }
});
</script>
</body>
</html>

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

Array in component props in Vue.js

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

Vue.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