将父母道具传递给Vue,js中的插槽
Posted
技术标签:
【中文标题】将父母道具传递给Vue,js中的插槽【英文标题】:Passing parents props to slot in Vue,js 【发布时间】:2020-01-30 22:18:13 【问题描述】:我的应用程序中有一个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>
我尝试使用v-slot
将isOutput
传递给父级(DocumentContainer)。现在的问题是我只能打印slotProps.isOutput
。我想将 slotProps.isOutput
作为道具传递给 <v-bar-chart>
和
<v-bar-chart :isOuput="slotProps.isOutput" :docId="id"></v-bar-chart>
在条形图道具中给了我未定义的信息。 有没有比将数据传递给父母和孩子更简单的方法?我怎样才能做到这一点?
【问题讨论】:
【参考方案1】:我认为这与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>
【讨论】:
以上是关于将父母道具传递给Vue,js中的插槽的主要内容,如果未能解决你的问题,请参考以下文章