父组件。 我在 Main 组件中具有像 startValue 这样的值，并将像 props 这样的 starValue 传递给 Settings 组件。一切都很好， Prop 传递也很好，但我无法使用“设置”组件(子组件)中的自定义事件来更新 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>
最佳答案
使用 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
}
}
}
引用文献:
关于javascript - 为什么不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $emit Vue 3？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64607069/