Для динамической передачи реквизитов вы можете добавить 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>