在 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> 标签上的一个属性上，就像一个prop：

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

您也可以destructureslotProps 更直接地访问属性：

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