Props

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

Каждый компонент определяет параметр props, через который мы можем передать компоненту извне различные данные. Например:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<message-comp message="hello"></message-comp>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('message-comp', {
  props: ['message'],
  template: '<h2>{{ message }}</h2>'
})
new Vue({
	el: "#app"
});
</script>
</body>
</html>

Параметр props хранит массив ключей или свойств, которым извне можно передать значения. В данном случае определено одно свойство message. Это свойство также можно использовать в шаблоне компонента (<span>{{ message }}</span>).

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

<message-comp message="hello"></message-comp>
Props in Vue.js

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

Vue.component('message-comp', {
  props: ['message'],
  data: function(){
	return { message: 'hi all'}
  },
  template: '<h2>{{ message }}</h2>'
})

И в данном случае будет использоваться свойство message из props, а не из параметра data.

Динамические свойства

В примере выше свойству message передается статическое литеральное значение - строка "hello". Однако можно также устанавливать значения свойств динамически в зависимости от введенных в поля ввода данных:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<input type="text" v-model="welcome" /><br><br>
	<message-comp v-bind:message="welcome"></message-comp>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('message-comp', {
  props: ['message'],
  template: '<h2>{{message}}</h2>'
})
new Vue({
	el: "#app",
	data: {
		welcome:''
	}
});
</script>
</body>
</html>

Теперь свойство message устанавливается динамически в зависимости от введеного значения:

Динамические свойства props в Vue.js

Для этого применяется механизм привязки - перед атрибутом указывается директива v-bind, которая определяет, к какому значению идет привязка:

<message-comp v-bind:message="welcome"></message-comp>

Также можно использовать сокращенную форму:

<message-comp :message="welcome"></message-comp>

Привязка к сложным объектам

Допустим, наш компонент выводит данные о пользователе - имя и возраст. Передадим эти данные в компонент:


<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<input type="text" v-model="name" /><br><br>
	<input type="number" v-model.number="age" /><br><br>
	<user :name="name" :age="age"></user>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('user', {
  props: ['name', 'age'],
  template: '<div><h2>User</h2><p>Name: {{name}}</p><p>Age: {{age}}</p></div>'
})
new Vue({
	el: "#app",
	data: {
		name: '',
		age: 18
	}
});
</script>
</body>
</html>

Здесь компонент получает значения для своих свойств name и age.

Передача в props сложных объектов в Vue.js

Но в данном случае свойства name и age можно оформить как единый объект и передавать этот объект целиком в компонент:

<div id="app">
	<input type="text" v-model="user.name" /><br><br>
	<input type="number" v-model.number="user.age" /><br><br>
	<user v-bind="user"></user>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('user', {
  props: ['name', 'age'],
  template: '<div><h2>User</h2><p>Name: {{name}}</p><p>Age: {{age}}</p></div>'
})
new Vue({
	el: "#app",
	data: {
		user: {
			name: '',
			age: 18
		}
	}
});
</script>

С помощью атрибута v-bind="user" объект user сразу передается компоненту и автоматически сопоставляется со свойствами name и age, которые определены в компоненте. Но естественно должно быть соответствие между названиями свойств объекта user и названиями свойств компонента. В остальном результат работы будет тот же самый, что и в предыдущем случае. В то же время несмотря на то, что вроде бы идет привязка к объекту user, тем не менее компонент получает значения его свойств по отдельности.

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

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