b站炮姐互联网广告公司

在 Vue 中，实现子组件通过 v-model 向父组件传递数据并接收后进行格式化，可以按照以下步骤来封装和实现：

步骤 1: 子组件实现 v-model

子组件需要定义一个 props 来接收 v-model 的值，并通过 emit 方法发出更新事件。

<!-- AmountSelector.vue -->
<template><inputtype="number":value="modelValue"@input="onInput($event.target.value)"/>
</template><script>
export default {props: {modelValue: {type: Number,required: true}},methods: {onInput(value) {// 发出 input 事件，以更新父组件的数据this.$emit('update:modelValue', Number(value));}}
};
</script>

步骤 2: 父组件使用子组件并接收数据

在父组件中，可以通过 v-model 绑定子组件的值，并定义一个方法或计算属性来格式化数据

<!-- ParentComponent.vue -->
<template><div><AmountSelector v-model="amount" /><p>Formatted Amount: {{ formattedAmount }}</p></div>
</template><script>
import AmountSelector from './AmountSelector.vue';export default {components: {AmountSelector},data() {return {amount: 0 // 初始金额值};},computed: {formattedAmount() {// 定义数据格式化，例如添加货币符号或小数点处理return `$${this.amount.toFixed(2)}`;}}
};
</script>

实现解析

1. 子组件 (AmountSelector.vue)：
   • 接收 modelValue 作为 props，即 v-model 的值。
   • 使用 this.$emit('update:modelValue', value) 来触发父组件更新数据。
2. 父组件 (ParentComponent.vue)：
   • 使用 v-model 绑定子组件，数据变动时，父组件自动接收并更新。
   • 使用 computed 属性或方法来格式化接收到的数据。

这种方式实现了数据的双向绑定，子组件通过 v-model 修改值后，父组件会实时接收并可对其进行格式化或进一步处理。