为啥不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $emit Vue 3？

Posted 2023-02-23

【中文标题】为啥不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $emit Vue 3？

【英文标题】：Why not updating value in the parent component which I passed in child component and updating use custom event $emit Vue 3?为什么不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $emit Vue 3？

【发布时间】：2021-02-12 20:07:40

【问题描述】：

父组件。 我在 Main 组件中有像 startValue 这样的值，并且像 props 一样将 starValue 传递给 Settings 组件。一切正常，道具通过也很好，但我无法使用设置组件（子组件）中的自定义事件更新 startValue。为什么？

<template>
<div>
  <span>Main</span>
  <SettingsBoard :max="maxValue" :start="startValue" @update="startValue = $event"/>
</div>
</template>

<script>
import ref from 'vue'
import SettingsBoard from "@/components/SettingsBoard";

export default 
name: "Main",
  components: 
    SettingsBoard
  ,

  setup() 
    const startValue = ref(1)
    const maxValue = ref(2);

    return 
      startValue,
      maxValue
    
  ,


</script>

子组件

<template>
  <div>
    <h3>Settings board</h3>
    <div>
      <span>start value</span>
      <label>
        <input :value="start" @input="onChangeStart"  type="number" step="1" min="0">
      </label>
    </div>
    <div>
      <h1>start</h1>
    </div>
  </div>
</template>

<script>

export default 
  name: "SettingsBoard",
  props: 
    start: type: Number, required: true,
    max: type: Number, required: true,
  ,
  setup() 

    const onChangeStart = (event) => 
      this.$emit('update: start', event.target.value)
    




    return strong text
      onChangeStart,
    
  ,

</script>

【问题讨论】：

在哪里定义strong text？此语法给出错误

【参考方案1】：

使用 v-model 在组件之间同步 prop 值。

家长

<SettingsBoard :max="maxValue" v-model:start.number="startValue" />

SettingsBoard（儿童）

export default 
  name: 'SettingsBoard',

  props: 
    start:  
      // Do [Number, String] to support multiple types, 
      // otherwise you'll have to cast it to number with the .number modifier.
      type: Number, 
      required: true 
    ,
    max:  type: Number, required: true 
  ,

  setup(props,  emit ) 
    const onChangeStart = (event) => 
      // Cast this target.value to number or use .number modifier 
      // since it's expecting a number
      emit('update:start', event.target.value)
    

    return 
      onChangeStart
    
  

参考资料：

https://v3.vuejs.org/guide/forms.html#number https://v3.vuejs.org/guide/component-custom-events.html#multiple-v-model-bindings