Vue js - вставить компонент в компонент

Question

Нужно сделать структуру как в Vuetify. То есть передавать в условную кнопку атрибуты.

<ifbutton google text="button text">
    <GoogleIcon class="google-btn__icon" />
</ifbutton>

То есть, когда я вызываю компонент, то я могу вставить внутрь него условную картинку или другой компонент

ifbutton.vue


<template>
  <button
    :class="[
      dark == true ? 'dark-btn' : '' || 
      green == true ? 'green-btn' : '' || 
      google == true ? 'google-btn' : ''
    ]"
  >
    {{ text }}
  </button>
</template>
<script>
export default {
  name: "IfButton",
  props: {
    text: {
      type: String,
      required: true
    },
    options: {
        type: Object,
        required: false
    },
    green: {
      type: Boolean,
      required: false,
      default: false
    },
    dark: {
      type: Boolean,
      required: false,
      default: false
    },
    google: {
        type: Boolean,
        required: false,
        default: false
    }
  }
}
</script>

Работаю на Vue и Nuxt, пока что новичок и слабо понимаю как нужно правильно это сделать

Answer 1

Vue реализует API распределения контента, вдохновлённое текущим черновиком спецификации веб-компонентов, используя элемент <slot> в качестве точек распространения контента.

Таким образом вам достаточно реализовать слот в компоненте <ifbutton>, чтобы он принимал вложенный контент(в том числе и компонент) и отображал его (Если компонент <ifbutton> не получит никакого контента или компонента, то по умолчанию будет вставлено содержимое <slot>{{ text }}</slot>). Например:

<button
 :class="[
 dark == true ? 'dark-btn' : '' || 
 green == true ? 'green-btn' : '' || 
 google == true ? 'google-btn' : ''
 ]"
>
 <slot>
   {{ text }}
 </slot>
</button>

И рабочий пример:

Vue.component('google-icon', {
  template: `
  <div>
    Google кнопка(слот)
  </div>
  `
})
Vue.component('ifbutton', {
  props: {
    text: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      required: false
    },
    green: {
      type: Boolean,
      required: false,
      default: false
    },
    dark: {
      type: Boolean,
      required: false,
      default: false
    },
    google: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  template: `
      <button
        :class="[
          dark == true ? 'dark-btn' : '' || 
          green == true ? 'green-btn' : '' || 
          google == true ? 'google-btn' : ''
        ]"
      >
        <slot>
          {{ text }}
        </slot>
      </button>
  `
})

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <ifbutton google text="button text">
    <google-icon class="google-btn__icon"></google-icon>
  </ifbutton>
  <ifbutton dark text="Другая кнопка(без слота)"></ifbutton>
</div>

БЛОГ НА HUSL

Vue js - вставить компонент в компонент

Ответы (1 шт):