我的需求是在第一次渲染时从父组件接收传过来的值,后续想自己改变这个值。但现在我在子组件defineProps中收到参数,却没办法改变了。请问该怎么解决啊?
<a-input-number
id="inputNumber"
v-model:value="num"
:min="1"
/>
let check = defineProps({
nums: {
type: Number,
default: 0
},)
const num = ref<number>(check.nums)
如代码所示,我想改变的是num的值,像数据库发送请求更新,父组件的值也是从数据库来的,自然会自动更新。如果通过emits向父组件传值,更新数据库会很麻烦。不知道可行不可行。
父组件是这样的
<div id="mydata" v-for="arr in cdata">
<CCard
:id="arr.id"
:nums="arr.num"
……
></CCard>
</div>
在 Vue3 中,子组件可以通过 props 接收来自父组件的参数,同时也可以通过 emit 方法向父组件发送事件来改变这个参数的值。
收到后赋值给子组件自己的变量进行修改
演示一下:
<!-- 父组件 -->
<template>
<div>
<h2>{{ message }}</h2>
<child-component :count="count" @update-count="updateCount" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
message: 'Hello, Vue3!',
count: 0,
};
},
methods: {
updateCount(value) {
this.count = value;
},
},
};
</script>
<!-- 子组件 -->
<template>
<div>
<h3>Count: {{ count }}</h3>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
default: 0,
},
},
methods: {
incrementCount() {
const newCount = this.count + 1;
this.$emit('update-count', newCount);
},
},
};
</script>
父组件传过去之后watch监听一下,不监听的话可能不会实时更新