javascript - 在 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>，例如 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>

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

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