Vue JS - 在插槽中改变传递的道具

Posted 2023-02-23

【中文标题】Vue JS - 在插槽中改变传递的道具

【英文标题】：Vue JS - Mutating Passed Props in Slot

【发布时间】：2021-02-07 19:11:03

【问题描述】：

我知道在 Vue 中改变 props 是不好的，但是，我不确定当你通过 slot 传递 props 时这是否适用。 我有以下父组件，里面有一个插槽。

父组件：

<template>
  <div>
    ..
    <slot :form="form"></slot>
    ..
  </div>
</template>
<script>
export default 
  name: 'parent-component',
  data () 
    return 
      form: new Form(
        fieldForParent: '',
        fieldForChild: '',
      )
    

</script>

ChildComponent.vue

<template>
  <parent-component>
    <template v-slot = "form">
      <input v-model="form.fieldForChild" />
    </template>
  </parent-component>
</template>

对我来说，真正的困惑是哪一个应该被视为父母和孩子。基本上， ChildComponent.vue 是组成父组件的组件，但它也将其值嵌套在父元素中。此外，API 的数据是从父组件中获取的。

这是我的问题： 这是正确的做法吗？我这样做是为了可重用性，因为子组件的多个实例将具有公共字段（因此是父组件），但每个子组件也会有唯一的字段。请注意，在子组件中改变道具后（通过更新输入元素），我没有收到“避免直接改变道具..”警告。

【问题讨论】：

作用域槽用于将一些数据从子组件暴露给父组件

@BoussadjraBrahim 这是否意味着可以改变插槽中的数据？

您正在颠倒逻辑，第一个组件应该是子组件，第二个组件应该是父组件

【参考方案1】：

让我先重新定义名称...实际上应该是这样的

子组件

<template>
  <div>
    ..
    <slot :form="form"></slot>
    ..
  </div>
</template>
<script>
export default 
  name: 'parent-component',
  data () 
    return 
      form: new Form(
        fieldForParent: '',
        fieldForChild: '',
      )
    

</script>

父组件

<template>
  <child-component>
    <template v-slot = "form">
      <input v-model="form.fieldForChild" />
    </template>
  </child-component>
</template>