我的应用程序中有一个DocumenContainer
组件,其中有多个ChartContainer
组件。 ChartContainer
有一个插槽,我可以在其中放置各种类型的图表(条形图,折线图等)。我想将数据isOuput
传递给作为插槽的子组件
ChartContainer (简体):
<template>
<div class="card-body">
<slot v-slot="isOutput"></slot>
</div>
</template>
<script>
export default {
data() {
return {
isOutput : false,
}
}
</script>
DocumentContainer :
<chart-container title="Stats Model" v-slot="slotProps" :documentId="id">
{{slotProps.isOuput}}
<v-bar-chart :docId="id"></v-bar-chart>
</chart-container>
我尝试通过
isOutput
将v-slot
传递给父级(DocumentContainer)。现在的问题是我只能打印{{slotProps.isOutput}}
。我想将slotProps.isOutput
作为<v-bar-chart>
的 Prop 传递给 <v-bar-chart :isOuput="slotProps.isOutput" :docId="id"></v-bar-chart>
在条形图 Prop 中给了我不确定的信息。
是否有比将数据传递给 parent 和 child 更简单的方法?我该如何实现?
最佳答案
我认为这与context
有关
如果您改为使用v-bind
,它将起作用
<v-bar-chart v-bind="{ isOutput: slotProps.isOutput, docId: id }"></v-bar-chart>
范例程式码
const Component1 = {
template: `
<div>
<h2>Component 1</h2>
<button @click="isOutput = !isOutput">Toggle</button>
<slot :isOutput="isOutput"></slot>
</div>
`,
data() {
return {
isOutput: false,
}
}
};
const Component2 = {
props: ['isOutput'],
template: `
<div>
<h2>Component 2</h2>
isOutput: {{String(isOutput)}}
</div>
`
};
new Vue({
el: '#app',
components: {
Component1,
Component2
}
});
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<div id="app">
<h1>Home</h1>
<Component1>
<template v-slot="slotProps">
isOutput: {{String(slotProps.isOutput)}}
<Component2 v-bind="{ isOutput: slotProps.isOutput }">
</Component2>
</template>
</Component1>
</div>