GOOGLE ADS

воскресенье, 8 мая 2022 г.

Что означает слот в функции рендеринга vue

В vue в функции рендеринга есть опция слота, в документе говорится, что «слот — это имя слота, если этот компонент является дочерним элементом другого компонента». Я не могу понять, что это значит. Насколько я понимаю, имя слота - это узел, возвращаемый именем функции createElement в качестве слота, но это кажется неправильным. Мой английский плохой, извините, если я не ясно описал вопрос.


Vue.component('render-component', {
render(h) {
return h('div', {
class: 'main'
}, [
h('div', { slot: 'header' }, 'header'),
h('div', { slot: 'footer' }, 'footer')
])
}
})
let vm = new Vue({
el: '#app',
data() {
return {
message: 123
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<render-component>
<template v-slot:header>111111</template>
</render-component>
</div>

Решение проблемы

Опция slotозначает, что результат функции рендеринга будет вставлен в слот компонента, который использовался в первом параметре.


Vue.component('card-component', {
template: `
<div>
<h1>Hello</h1>
<strong><slot/></strong>
<i><slot name="note" /></i>
</div>
`
});
Vue.component('parent-component', {
render(h) {
const defaultSlotContent = h('p', {}, 'default description');
const namedSlotContent = h('p', {slot: 'note'}, 'It is a note')
return h('card-component', {}, [defaultSlotContent, namedSlotContent]);
}
});
let vm = new Vue({
el: '#app',
data() {
return {
message: 123
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<parent-component />
</div>

Комментариев нет:

Отправить комментарий

Laravel Datatable addColumn returns ID of one record only

Я пытаюсь использовать Yajra Datatable для интеграции DataTable на свой веб-сайт. Я смог отобразить таблицу, но столкнулся с проблемой. В по...