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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</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"></script>
<script>
const app = Vue.createApp({
    data(){
        return { 
			users: [{
            name: 'Tom',
            age: 18
        },{
            name: 'Bob',
            age: 23
        },{
            name: 'Alice',
            age: 21
        }]
		}
    }
});
 
app.component('userdetails', {
    props: ["user"],
    template: `<div class="userdetails">
                    <p>Name: {{user.name}}</p>
                    <p>Age: {{user.age}}</p>
                </div>`
});
app.component('userslist', {
    props: ["users"],
    template: `<div>
                <userdetails v-for="user in users" :key="user.name" :user="user"></userdetails>
            </div>`
});
app.mount('#app');
</script>
</body>
</html>

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

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

Дочерние компоненты в Vue 3

Глобальная и локальная регистрация компонентов

Обратите внимание, что для добавления компонентов в приложение Vue применялась глобальная регистрация компонентов, то есть с помощью вызова метода app.component(). Благодаря этому компонент userdetails доступен в любом другом компоненте приложения Vue, например, в компоненте userslist. Также компоненту userdetails доступны любые глобальные компоненты.

Однако компоненты могут быть также зарегистрированы локально. Например, сделаем компонент userdetails локальным:

const userDetailsComponent = {
    props: ["user"],
    template: `<div class="userdetails">
                    <p>Name: {{user.name}}</p>
                    <p>Age: {{user.age}}</p>
                </div>`
}
const app = Vue.createApp({
    data(){
        return { 
			users: [{
            name: 'Tom',
            age: 18
        },{
            name: 'Bob',
            age: 23
        },{
            name: 'Alice',
            age: 21
        }]
	   }
    },
	components:{
		'userdetails': userDetailsComponent
	}
});

app.component('userslist', {
    props: ["users"],
    template: `<div>
                <userdetails v-for="user in users" :key="user.name" :user="user"></userdetails>
            </div>`
});
app.mount('#app');

Поскольку компонент userdetails теперь локальный, то он теперь не доступен из компонента userslist. И при загрузке веб-страницы мы сможем увидеть в консоли брузера препудпреждение, что компонент userdetails не найден.

Но мы можем также сделать компонент локальным не по отношению к приложению Vue, а по отношению к другому компоненту, например, сделать его докальным компонентом компонента userslist:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</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"></script>
<script>
const userDetailsComponent = {
    props: ["user"],
    template: `<div class="userdetails">
                    <p>Name: {{user.name}}</p>
                    <p>Age: {{user.age}}</p>
                </div>`
}
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: `<div>
                <userdetails v-for="user in users" :key="user.name" :user="user"></userdetails>
            </div>`,
	components:{
		'userdetails': userDetailsComponent
	}
});
app.mount('#app');
</script>
</body>
</html>

Для локальной регистрации у родительского компонента объект JavaScript передается параметр components:

app.component('userslist', {
    // ...............
	components:{
		'userdetails': userDetailsComponent
	}
});

В данном случае компонент userDetailsComponent получает имя "userdetails", и теперь его можно использовать в рамках компонента userslist.

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

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