在 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"没有对isEditing中FormComponent的更改做出反应。

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

Answer 1

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

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

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

通过以这种格式向v-slot指令添加表达式来访问 object：

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

（或在#default="slotProps"中使用别名# 。）您可以通过 object 访问单个属性，例如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>

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

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