openblog

Appearance

vue笔记（一）： 组件使用v-model方式获取值 ​

图片

标题有点不太好理解，我现在解释一下

组件标签怎么用v-model直接获取组件的返回值

下图是vue3官方例子

图片

有时候我们封装input输入框，就会用到这个功能，父组件用v-model来获取input组件反馈的输入值

下面是官方介绍：

关于input输入框的组件封装

子组件：item.vue

html
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['modelValue'],        //必须
  emits: ['update:modelValue']  //必须
}
</script>
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['modelValue'],        //必须
  emits: ['update:modelValue']  //必须
}
</script>

父组件：

html
<template>
  <item v-model="value" />
</template>
<template>
  <item v-model="value" />
</template>

按照上面写法

父组件就可以正常通过v-model获取子组件的输入值

另外还有其他情况，比如:

类似element ui的有很多组件是有分组的

比如el-checkbox-group复选框组

父组件el-checkbox-group添加v-model可以实现获取子组件el-checkbox的选择值也可以用这个方式实现

我这边实现思路是每个子组件的点击事件会触发一个emit事件提交点击的结果值，父组件on监听触发的emit事件获取结果值

最后就是反馈的结果提交给v-model就完成了。

本文到此结束。

反馈信息 ​

INFO

邮箱： open_teams@163.com