为什么不更新我在子组件中传递的父组件中的值并更新使用自定义事件 $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?
父组件。
我在 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>
使用v-model
在组件之间同步道具值。
Parent
<SettingsBoard :max="maxValue" v-model:start.number="startValue" />
SettingsBoard
(child)
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
}
}
}
参考文献:
父组件。 我在 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>
使用v-model
在组件之间同步道具值。
Parent
<SettingsBoard :max="maxValue" v-model:start.number="startValue" />
SettingsBoard
(child)
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
}
}
}
参考文献: