Родительские и дочерние компоненты

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

Одни компоненты (родительские компоненты) могут содержать другие (дочерние компоненты). Например, один компонент выводит список объект, а для вывода отдельного объекта используется еще один компонент:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
<style>
.userdetails{
	border-bottom: 1px solid #888;
}
</style>
</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('userdetails', {
	props: ["user"],
	template: `<div class="userdetails">
					<p>Name: {{user.name}}</p>
					<p>Age: {{user.age}}</p>
				</div>`
});
Vue.component('userslist', {
	props: ["users"],
	template: `<div>
				<userdetails v-for="user in users" :key="user.name" :user="user"></userdetails>
			</div>`
});
new Vue({
    el: "#app",
    data: {
        users: [{
			name: 'Tom',
			age: 18
        },{
			name: 'Bob',
			age: 23
		},{
			name: 'Alice',
			age: 21
		}]
    }
});
</script>
</body>
</html>

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

В принципе мы могли бы определить все в одном компоненте, однако выделение отдельного компонента userdetails позволяет развивать и обновлять его разметку отдельно от родительского компонента. Например, если потребуется изменить структуру разметки html в компоненте, то достаточно это сделать в коде компонента userdetails. К тому же мы можем повторно использовать данный компонент в других компонентах и частях программы.

Child components in Vue.js

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

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