Props

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

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

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <message-comp message="hello"></message-comp>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({});

app.component('message-comp', {
	props: ['message'],
	template: '<h2>{{ message }}</h2>'
})
app.mount('#app');
</script>
</body>
</html>

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

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

<message-comp message="hello"></message-comp>
Передача внешних данных в компонент через параметр props в Vue 3

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

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

И в данном случае Vue 3 использовало свойство message из data, а не из параметра props, тем не менее в консоли мы бы увидели предупреждение, что свойство тем же именем также определено и в параметре props. Поэтому такой двойственности лучше избегать.

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

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

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</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"></script>
<script>
const app = Vue.createApp({
	data(){
		return {welcome: ''}
	}
});

app.component('message-comp', {
  props: ['message'],
  template: '<h2>{{message}}</h2>'
});
app.mount('#app');
</script>
</body>
</html>

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</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"></script>
<script>
const app = Vue.createApp({
	data(){
		return { name: '', age: 18 }
	}
});

app.component('user', {
  props: ['name', 'age'],
  template: '<div><h2>User</h2><p>Name: {{name}}</p><p>Age: {{age}}</p></div>'
});
app.mount('#app');
</script>
</body>
</html>

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

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

Но в данном случае свойства 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"></script>
<script>
const app = Vue.createApp({
	data(){
		return { 
			user: { name: '', age: 18 } 
		}
	}
});

app.component('user', {
  props: ['name', 'age'],
  template: '<div><h2>User</h2><p>Name: {{name}}</p><p>Age: {{age}}</p></div>'
});
app.mount('#app');
</script>

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

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