Question

假设我已经创建了一个带有变量myVar的按钮组件：

MyButton.vue

<template>
  <div>
    <slot :name="text">
      My Button
    </slot>
  </div>
</template>

<script>
export default {
  name: 'my-button',
  data() {
    return: {
      myVar: 'TEST'
    }
  }
}
</script>

我想在其他组件中使用这个组件：

OtherComponent.vue

<my-button>
  <div :slot="text">
    This is a Button
  </div>
</my-button>

如何访问父myVar插槽定义中MyButton.vue中声明的变量OtherComponent.vue？例如：

OtherComponent.vue

<my-button>
  <div :slot="text">
    This is myVar {{ myVar }} from MyButton.vue
  </div>
</my-button>

Answer 1

经过进一步研究，我发现了这个：

<强> MyButton.vue

<slot :name="text" slot-scope="slot" :myVar="myVar">
  My Button
</slot>

<强> OtherComponent.vue

<my-button>
  <div :slot="text" slot-scope="slot">
    {{ slot.myVar }}
  </div>
</my-button>

有关详细信息，请参阅documentation。

Vue - 与插槽共享变量

1 个答案: