Передача пропса в динамический компонент

Question

Всем привет. Возник вопрос. Как можно передать пропс в динамический компонент ?

У меня компоненты вставляются через

<component :is="valueSelect"></component>

Либо как можно переделать код, чтобы динамически подставлять компоненты внутрь другого компонента

Answer 1

Для динамической передачи реквизитов вы можете добавить v-bind директиву в свой динамический компонент и передать объект, содержащий имена и значения ваших реквизитов.

Если вы хотите передать все свойства объекта в качестве реквизита, вы можете использовать v-bind без аргумента ( v-bind вместо :prop-name). Например, для данного post объекта:
export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'My Journey with Vue'
      }
    }
  }
}
Следующий шаблон: <BlogPost v-bind="post" />

Связывание нескольких свойств с использованием объекта

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

const app = Vue.createApp({
  template: `
    <component is="FirstComponent" v-bind="{ prop1: 'prop1', counter, }"/>
    <component is="SecondComponent" v-bind="{ prop2: 'prop2', counter }" v-on="{onTestClick}" />
   `,
  setup() {

    const counter = Vue.ref(0);
    const onTestClick = () => {
      counter.value += 1
    }

    return {
      counter,
      onTestClick,
    }
  },
})

const FirstComponent = {
  props: ['prop1', 'counter'],
  template: `
  <figure>
    <figcaption>FirstComponent</figcaption>
    <code>
      {{$props}}
    </code>
  </figure>
  `
}
app.component('FirstComponent', FirstComponent)

const SecondComponent = {
  props: ['prop2', 'counter'],
  emits: ['onTestClick'],
  template: `
  <figure>
    <figcaption>SecondComponent 
      <button @click="$emit('onTestClick')">counter ++</button></figcaption>
    <code>
      {{$props}}
    </code>
  </figure>
  `
}
app.component('SecondComponent', SecondComponent)

app.mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<div id="app"></div>

БЛОГ НА HUSL

Передача пропса в динамический компонент

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