为啥不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $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?的主要内容,如果未能解决你的问题,请参考以下文章