0

В main.js объявляю глобально компоненты:

    import VaсansyCard from './components/vaсansy-card/vaсansy-card.vue'
    import VacansyLabel from './components/vaсansy-card/vaсansy-card-label.vue'
    import VaсansyModal from './components/vaсansy-card/vaсansy-card-modal.vue'
    import VaсansyStatus from './components/vaсansy-card/vaсansy-card-status.vue'
    import VaсansyIcons from './components/vaсansy-card/vacansy-card-icons.vue'
    import VaсansySlideDown from './components/vaсansy-card/vacansy-slide-down.vue'


    Vue.component ("vacansy-card", VaсansyCard)
    Vue.component ("vacansy-card-label", VacansyLabel)
    Vue.component ("vacansy-card-modal", VaсansyModal)
    Vue.component ("vacansy-card-status", VaсansyStatus)
    Vue.component ("vacansy-card-icons", VaсansyIcons)
    Vue.component ("vacansy-slide-down", VaсansySlideDown)


    new Vue({
      el: '#app',
      render: h => h(App)
    })

Потом в компоненте vacansy-card я собираю из остальных компонентов общий блок:

<template>
    <div>
        <div class="card-content vacansy-card p-0 d-flex flex-wrap w-100 vacansy-slide-down">
            <div class="w-100 p-0 mb-3 border-0">
            <div class="card bg-color-4 border-0 Ttest-1 ">
                <div class="card-header" data-toggle="collapse">
                <div class="d-flex">
                    <div>
                        ЗДЕСЬ ДОЛЖЕН БЫТЬ ЗАГОЛОВОК (<h5></h5) 
                    </div>          
                </div>
                <div class="d-flex mt-3">
                    <div>
                        <div class="flex-auto bg-color-3" style="width: 220px; height: 220px">
                        </div>
                    </div>
                    <div class="mx-3 d-flex flex-column">
                        <button class="btn btn-8 mt-auto">Откликнуться</button>
                    </div>
                    <div class="d-flex w-100">
                    <div class="mr-3 d-flex flex-column flex-shrink-0 justify-content-between">
                        <vacansy-card-modal></vacansy-card-modal>
                        <div>
                            <vacansy-card-icons></vacansy-card-icons>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <vacansy-card-status></vacansy-card-status>
                        <vacansy-card-label></vacansy-card-label>
                    </div>
                    </div>
                </div>
                </div>
                <vacansy-slide-down></vacansy-slide-down>
            </div>
            </div>
        </div>
    </div>
</template>

Вопрос: Как передать (и где именно передавать) через props параметры в компонент, чтобы, например, отрисовывать два идентичных блока, но с разными заголовками в шапке. И второй вопрос: можно ли как-то в параметрах передать не только html заголовок, но и вообще целый отдельный компонент?

1 ответ 1

1

Передаете заголовок в компоненту:

<my-component :title="'Заголовок'" />

Принимаете в компоненте и вставляете:

<template>
    <h2>{{ title }}</h2>
</template>
<script>
    export default {
        props: ['title'],
    }
</script>

Передать компоненту можно, точнее можно передать ее имя, и вставить потом ее так:

<component :is="'my-component'"></component>

Но будет сложнее передать вместе с самой компонентой ее свойства.

1
  • Спасибо, буду разбираться 11 окт 2018 в 5:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.