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

我有一个简单的

表单组件

：

<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>

编辑
导出默认值{
数据（）{
返回{
i编辑：错，
}
},
方法：{
编辑（状态）{
this.isEditing=！this.isEditing
}
}
}

当我使用组件时：

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

输入字段已正确插入组件，但插槽中的

：disabled=“！isEditing”

未对

表单组件中
isEditing
的更改作出反应

Vue文档非常好，但它并没有涵盖每种边缘情况。
带有
标记的组件必须将数据绑定到
标记上的属性上，如道具：



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

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



（或使用别名
#
，如
#default=“slotProps”
）您可以通过该对象访问单个属性，如
isEditing
，如
slotProps.isEditing
：



以下是更常见（且多功能）的
语法：



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

带有
标记的组件必须将数据绑定到
标记上的属性上，就像一个道具：



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

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



（或使用别名
#
，如
#default=“slotProps”
）您可以通过该对象访问单个属性，如
isEditing
，如
slotProps.isEditing
：



以下是更常见（且多功能）的
语法：



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


请链接说明支持在有槽元素上使用这种绑定的文档部分。它询问“您如何知道这是受支持的”。请链接说明在有槽元素上使用这种绑定的文档部分。它询问“您如何知道这是受支持的”.你能解释一下
#default=“{isEditing}”
是如何工作的吗？我知道我需要将
isEditing
绑定到组件中的
，但我看不到一个短名插槽与
：disabled=“！isEditing”
之间的连接。它只是es6对象，不是Vue功能。您可以用
{}
替换任何给定的对象引用，并列出要提取的属性。因此，
{}
是上一个示例中的
slotProps
的替代品。不管是哪种方式，都有一个对象被传递到了那里，现在它没有命名，而是被分解了。是的，好的，我知道了，对不起。我的意思是
slotProps
做什么。我不明白为什么将它添加到
FormComponent
中时会起作用。链接到一个好的源代码也很好，但我无法从Vue文档中了解为什么这样做。这是Vue创建的一个对象，它聚合了
标记上的所有属性绑定，因此由于
上有一个
isEditing
属性，该属性也存在于该对象上。之所以需要
default
，是因为必须提供一个名称来指定目标插槽。而“default”是插槽的默认名称，当没有明确给出名称时，如
《Vue指南》讨论了其中一些问题。您能否解释
#default=“{isEditing}”
的工作原理？我知道我需要将
isEditing
绑定到组件中的
，但我看不到一个短名插槽与
：disabled=“！isEditing”
之间的连接。它只是es6对象，不是Vue功能。您可以用
{}
替换任何给定的对象引用，并列出要提取的属性。因此，
{}
是上一个示例中的
slotProps
的替代品。不管是哪种方式，都有一个对象被传递到了那里，现在它没有命名，而是被分解了。是的，好的，我知道了，对不起。我的意思是
slotProps
做什么。我不明白为什么将它添加到
FormComponent
中时会起作用。链接到一个好的源代码也很好，但我无法从Vue文档中了解为什么这样做。这是Vue创建的一个对象，它聚合了
标记上的所有属性绑定，因此由于
上有一个
isEditing
属性，该属性也存在于该对象上。之所以需要
default
，是因为必须提供一个名称来指定目标插槽。当没有明确给出名称时，“default”是插槽的默认名称，如《Vue指南》中讨论的一些名称