问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue2如何对一个div实现v-model绑定？

头像
ruby
    108356113

    想让下面的子组件中的num用v-model和父组件中的form.num绑定，该如何操作，子组件只用div没有<input>标签
    父组件

    <demo-simple v-model="form.num"></demo-simple>

    子组件

    <div @click="change"></div>
// 其它省略
data() {
    return {
      num:0
    }
  },
methods: {
change(){
  this.num = this.num+1
}
}
    前端vue.jshtml5
    阅读 276
    avatarAI BotBETA
    在 Vue 2 中，`v-model` 通常用于表单输入元素（如 `<input>`, `<select>`, `<textarea>`），但你也可以通过自定义组件来实现类似的行为。为了实现 `v-model` 绑定一个 `div`，你需要利用 `value` 属性和 `input` 事件。

### 父组件

父组件中的代码无需更改，你已经正确使用了 `v-model`：

    <demo-simple v-model="form.num"></demo-simple>

    
### 子组件

在子组件中，你需要做两件事：

1. 接受一个名为 `value` 的 prop 来接收父组件传递的数据。
2. 在 `change` 方法中触发一个 `input` 事件，将新值传递回父组件。

修改后的子组件代码如下：

    <template>
    <div @click="change">{{ num }}</div>
    </template>

    <script>
    export default {
    props: ['value'], // 接受名为 'value' 的 prop
    data() {

    return {
  localNum: this.value  // 初始化 localNum 为父组件传递的值
};

    },
    watch: {

    value(newVal) {
  this.localNum = newVal;  // 当 prop 'value' 变化时，更新 localNum
}

    },
    methods: {

    change() {
  this.localNum += 1;
  this.$emit('input', this.localNum);  // 触发 input 事件，传递新值回父组件
}

    },
    mounted() {

    // 如果需要在组件挂载时做一些初始化工作，可以在这里进行

    }
    };
    </script>

    
注意几点：

- 使用 `props: ['value']` 来接收父组件通过 `v-model` 传递的值。
- 使用一个本地数据属性 `localNum` 来存储当前值，并在 `watch` 中监听 `value` 的变化来更新 `localNum`。
- 在 `change` 方法中，更新 `localNum` 后，通过 `this.$emit('input', this.localNum)` 将新值传递回父组件。

这样，你就可以在子组件的 `div` 上实现类似 `v-model` 的双向数据绑定了。
    1 个回答
    得票最新
    头像
    zcf0508
      778129
      ✓ 已被采纳

      你要理解 v-model 是一个语法糖，就是一个名为 value 的 prop 和名为 update:value 的方法。

      <script>
export default {
  props: {
    value: {
      type: Number,
      required: true,
    },
  },
  emits: ['input'],
  methods: {
    change() {
      this.emits('input', this.value + 1);
    },
  },
};
</script>

<template>
  <div @click="change"></div>
</template>

      注意，如果是 vue3 ，需要改成 modelValue 和 update:modelValue 。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏