Vue 3 插槽道具不会反应性地更改父级中的数据答案

【问题标题】：Vue 3 slot props not reactively changing data in parentVue 3 插槽道具不会反应性地更改父级中的数据
【发布时间】：2022-11-29 08:06:41
【问题描述】：

我在父 Vue3 组件中有一个包含单选按钮的插槽，我将 v-model 属性传递给这些单选按钮，并且数据模型存在于父组件中。但是，当我更改插槽中选定的单选按钮时，父组件中的数据不会更改。

父模板：

<template>
    <div class="card">
        <div class="card-body">
            <slot
                :type="type"
            />
        </div>
    </div>
</template>

父视图：

<script>
    export default {
        data() {
            return {
                type: 'standard',
            }
        },
    }
</script>

插槽内容：

<parent v-slot="slotProps">
    <div class="row">
        <label>
            <span class="required">Type</span>
        </label>
        <label>
            Standard Model
            <input v-model="slotProps.type" type="radio" name="type" value="standard" required/>
        </label>
        <label>
            Touch Model
            <input v-model="slotProps.type" type="radio" name="type" value="touch" required/>
        </label>
        <label>
            Display Model
            <input v-model="slotProps.type" type="radio" name="type" value="display" required/>
        </label>
    </div>
</parent>

【问题讨论】：

标签： vue.js vue-component vuejs3

【解决方案1】：

我认为这不是一个好主意，Vue team 也不推荐这样做。
无论如何，如果你真的需要这样做，正如 Vue 团队的 posva 所说，你可以传递一个方法来改变值或者你可以传递一个对象并修改一个属性(请记住，不推荐这样做).

这里是目的方法：

家长：

<template>
  <div class="card">
    <div class="card-body">
      <slot :myObject="myObject" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: {
        type: "standard",
      },
    };
  },
};
</script>

插槽内容：

<parent v-slot="slotProps">
  <div class="row">
    <label>
      <span class="required">Type</span>
    </label>
    <label>
      Standard Model
      <input
        v-model="slotProps.myObject.type"
        type="radio"
        name="type"
        value="standard"
        required
      />
    </label>
    <label>
      Touch Model
      <input
        v-model="slotProps.myObject.type"
        type="radio"
        name="type"
        value="touch"
        required
      />
    </label>
    <label>
      Display Model
      <input
        v-model="slotProps.myObject.type"
        type="radio"
        name="type"
        value="display"
        required
      />
    </label>
  </div>
</parent>

这里是方法方法：

家长：

<template>
  <div>
    <div>
      <slot :type="type" :onTypeChange="onTypeChange" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "touch",
    };
  },
  methods: {
    onTypeChange(event) {
      this.type = event.target.value;
    },
  },
};
</script>

插槽内容：

<parent v-slot="slotProps">
  <div class="row">
    <label>
      <span class="required">Type</span>
    </label>
    <label>
      Standard Model
      <input
        v-model="slotProps.type"
        type="radio"
        name="type"
        value="standard"
        required
        @change="slotProps.onTypeChange"
      />
    </label>
    <label>
      Touch Model
      <input
        v-model="slotProps.type"
        type="radio"
        name="type"
        value="touch"
        required
        @change="slotProps.onTypeChange"
      />
    </label>
    <label>
      Display Model
      <input
        v-model="slotProps.type"
        type="radio"
        name="type"
        value="display"
        required
        @change="slotProps.onTypeChange"
      />
    </label>
  </div>
</parent>

【讨论】：