将父母道具传递给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-slotisOutput 传递给父级(DocumentContainer)。现在的问题是我只能打印slotProps.isOutput。我想将 slotProps.isOutput 作为道具传递给 &lt;v-bar-chart&gt;

 <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中的插槽的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js“超出最大调用堆栈大小”错误。将数据从父母传递给孩子失败

将道具从孙子传递给父母

Vue - 将方法作为道具传递给孩子

如何在 VueJS 中将模板(插槽)从祖父组件传递给孙子?

vue,发射与传递函数作为道具

反应父母对孩子道具传递而不重新渲染