在 Vue 模板槽中使用父槽变量

Question

我有一个简单的FormComponent:

<template>
  <form>
    <fieldset>
      <slot />
    </fieldset>
    <span v-if="!isEditing" @click="edit()">Edit</span>
  </form>
</template>

<script>
export default {
  data () {
    return {
      isEditing: false,
    }
  },
  methods: {
    edit (state) {
      this.isEditing = !this.isEditing
    }
  }
}
</script>

当我使用组件时：

<FormComponent>
  <input value="Man" type="text" :disabled="!isEditing">
</FormComponent>

输入字段已正确插入组件，但插槽中的 :disabled="!isEditing" 未对 FormComponent 中 isEditing 的更改作出反应。

Vue 文档非常好，但它没有涵盖每种边缘情况。

Answer 1

具有 <slot></slot> 标签的组件必须将数据绑定到 <slot> 标签上的属性，如道具：

<slot :isEditing="isEditing"></slot>

然后当您渲染那个带槽的组件时，Vue 会创建并公开一个包含所有绑定数据的对象，每个属性在该对象上都有一个属性。

通过向 v-slot 指令添加表达式来访问对象，格式如下：

<FormComponent v-slot:default="slotProps">

（或使用别名 #，如 #default="slotProps"。）您可以通过该对象访问 isEditing 等个别属性，例如 slotProps.isEditing:

<FormComponent #default="slotProps">
  <input value="Man" type="text" :disabled="!slotProps.isEditing">
</FormComponent>

下面是更常见（和通用）的 <template> 语法：

<FormComponent>
  <template #default="slotProps">
    <input value="Man" type="text" :disabled="!slotProps.isEditing">
  </template>
</FormComponent>

您还可以 destructure slotProps 更直接地访问属性：

<FormComponent>
  <template #default="{ isEditing }">
    <input value="Man" type="text" :disabled="!isEditing">
  </template>
</FormComponent>

在 Vue 模板槽中使用父槽变量

Use parent slot variables in Vue template slot

javascript

vue.js

vue-component

vuejs2

vuejs-slots