在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"中的别名#。)您可以通过该对象(如slotProps.isEditing )访问各个属性，如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>