Vue.js предоставляет несколько способов вставки компонентов в тело статьи или другой разметки.
1. С использованием компонентов-шаблонов: Предварительно определите компонент, включая его разметку и логику в файле .vue. Затем, в теле статьи, используйте тег компонента в качестве обертки для вставки его содержимого. Пример:
<template>
<div>
<!-- разметка и логика компонента -->
</div>
</template>
<script>
export default {
// логика компонента
}
</script>
В теле статьи:
<template>
<div>
<h1>Заголовок статьи</h1>
<my-component></my-component> <!-- вставка компонента -->
<p>Текст статьи...</p>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
export default {
components: {
'my-component': MyComponent
}
}
</script>
2. С использованием динамических компонентов: Если вам нужно вставить разные компоненты в зависимости от условий, вы можете использовать директиву component и динамически менять компонент, связанный с ней. Пример:
<template>
<div>
<h1>Заголовок статьи</h1>
<component :is="currentComponent"></component> <!-- вставка компонента -->
<p>Текст статьи...</p>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
import AnotherComponent from './components/AnotherComponent.vue'
export default {
data() {
return {
currentComponent: 'my-component' // имя текущего компонента, который будет вставлен
}
},
components: {
'my-component': MyComponent,
'another-component': AnotherComponent
}
}
</script>
3. С использованием слотов: Если вам нужно вставить компоненты с определенной разметкой внутрь другого компонента, вы можете использовать слоты. Слоты позволяют вставлять контент внутрь компонента в месте, где определен слот. Пример:
Разметка компонента, в который будет вставлен контент:
<template>
<div>
<h1>Заголовок статьи</h1>
<slot></slot> <!-- слот для вставки контента -->
<p>Текст статьи...</p>
</div>
</template>
Использование компонента со вставкой контента в месте слота:
<template>
<div>
<my-component>
<p>Дополнительный контент</p> <!-- контент, вставленный в слот -->
<my-component>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
export default {
components: {
'my-component': MyComponent
}
}
</script>
Это некоторые способы вставки компонентов в тело статьи на Vue.js. Выбор способа зависит от ваших требований и особенностей проекта.