Vue3插槽Props无法响应式更新父组件数据问题咨询

你直接修改插槽传递的slotProps.type没法同步到父组件，核心原因是插槽的prop是单向传递的——父组件传给插槽的数据，只能由父组件自己修改，插槽里直接赋值根本触不到父组件的响应式数据更新。Vue的数据流规则就是子组件/插槽不能直接改父组件状态，必须通过事件通知父组件动手。

有两种常用的路子：

办法一：用Vue的v-model语法糖（推荐） #

利用Vue的自定义v-model实现双向绑定，父组件传modelValue和对应的更新事件，插槽里直接用v-model就行。

父组件修改： #

<template>
  <div class="card">
    <div class="card-body">
      <!-- 把数据和更新方法传给插槽 -->
      <slot
        :modelValue="type"
        @update:modelValue="type = $event"
      />
    </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.modelValue" type="radio" name="type" value="standard" required/>
    </label>
    <label>
      Touch Model
      <input v-model="slotProps.modelValue" type="radio" name="type" value="touch" required/>
    </label>
    <label>
      Display Model
      <input v-model="slotProps.modelValue" type="radio" name="type" value="display" required/>
    </label>
  </div>
</parent>

Vue3会自动把v-model的更新映射到update:modelValue事件上，写法非常简洁。

办法二：给插槽传个修改方法 #

父组件写个修改type的方法，传给插槽，插槽里点单选按钮时调用这个方法更新父组件数据。

父组件修改： #

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

<script>
export default {
  data() {
    return {
      type: 'standard',
    }
  },
  methods: {
    setType(newType) {
      this.type = newType;
    }
  }
}
</script>

插槽内容修改： #

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

父组件传给插槽的type是单向数据流，插槽只能读不能直接改。你用v-model="slotProps.type"时，其实是给slotProps这个临时对象的type属性赋值，根本没碰父组件里的type变量，自然不会触发父组件的响应式更新。

内容的提问来源于stack exchange，提问作者sula7ifa