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

Posted

技术标签:

【中文标题】为啥不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $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

【讨论】:

以上是关于为啥不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $emit Vue 3?的主要内容,如果未能解决你的问题,请参考以下文章

父组件更改道具(布尔值)时子组件不更新

在父组件的值更改时更新子组件中的值

Vue父子组件双向数据绑定

Vue中 子组件向父组件传值 及 .sync 修饰符 详解

每当在子组件中更新时更新父元素中的数据

问题将Redux与来自React的父道具连接起来