likes
comments
collection
share

Vue2/3 自定义组件的 v-model 到底怎么写?

作者站长头像
站长
· 阅读数 272

本文简介

点赞 + 关注 + 收藏 = 学会了

在使用第三方UI组件库时会发现可以在他们的组件上使用 v-model ,比如 Element-UI 或者 Element-plusel-input 就可以使用 v-model 进行数据绑定。

本文就以 input 元素做例子,实现在自定义组件中使用 v-model 进行数据绑定。

我创建一个自定义组件,名字叫 z-input ,我希望在父组件可以使用 v-model 绑定数据,代码如下所示:

父组件中使用

<template>
  <z-input v-model="msg" />
</template>

<!-- 省略js代码 -->

本文会分别使用 Vue 2Vue 3.2 进行演示

Vue 2

你可以使用 vue-cli 脚手架创建项目,也可以使用 vite 创建 Vue 2 的项目。

如果还不了解如何使用 vite 创建 Vue 2 项目,可以跟着 《Vite 搭建 Vue2 项目(Vue2 + vue-router + vuex)》 进行操作。

例子

Vue2/3 自定义组件的 v-model 到底怎么写?

父组件

<template>
  <div>
    <z-input v-model="msg" />
    <p>{{ msg }}</p>
  </div>
</template>

<script>
import ZInput from './ZInput'
export default {
  components: {
    ZInput
  },
  data() {
    return {
      msg: '雷猴'
    }
  }
}
</script>

自定义组件:z-input

<input type="text"
  :value="msg1"
  @input="$emit('change1', $event.target.value)"
>

<script>
export default {
  model: {
    prop: 'msg1', // 对应 props msg
    event: 'change1'
  },
  props: {
    msg1: {
      type: String,
      default: ''
    }
  }
}
</script>

讲解

上面的代码中,父组件的逻辑比较简单,在 <z-input> 组件后面加一个 <p> 标签,用来测试子组件能不能通过 v-model 的方式改变父组件的值。

重点是 z-input 组件。

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

z-input 组件的 props 里并没有定义 value ,这是怎么回事呢?

如果我们在父组件用 v-model 传值给自定义组件,自定义组件的 props 应该这样写

<input type="text"
  :value="value"
>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

此时就是子组件能接收到父组件通过 v-model 传进来的值

Vue2/3 自定义组件的 v-model 到底怎么写?

“例子” 里的子组件 props 属性里并没有定义 value ,而是写成 msg1 。如果直接把 props.msg1 代替了 props.value ,再改 input :value="msg1" ,数据就绑不上了。

"例子" 中用到的魔法是 model

model: {
  prop: 'msg1'
}

model.prop 可以定义父组件通过 v-model 传入的值应该对应自定义组件 props 的那个属性。

所以在 z-input 定义的 props.msg1 就专门用来接收 v-model 传进来的值了。

然后再通过 model.event 定义要向上触发的事件名

model: {
  event: 'change1'
}

最后在 HTML 元素上通过 $emit 向上触发事件,传递的值可以自定义。由于本例使用了 input 元素,所以可以将输入框的值往上传。

输入框的值获取方法: $event.target.value

以上就是在 Vue 2 中自定义组件的 v-model 的用法。

Vue 3.2

使用 <script setup> 语法。

如果你还不太了解在 Vue 3.2<script setup> 中如何使用 v-model ,可以先阅读一下 《Vue3 过10种组件通讯方式》,里面有讲到。

例子

父组件

<Child
  v-model="message"
/>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const message = ref('hello')
</script>

自定义组件:z-input

<input
  type="text"
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>

<script setup>
import { ref } from 'vue'

// 接收
const props = defineProps([
  'modelValue' // 接收父组件使用 v-model 传进来的值,必须用 modelValue 这个名字来接收
])
</script>

其实原理和 Vue 2 是差不多的。只是语法改了一下。

script setup 的语法中,需要使用 modelValue 接收父组件传入的值。

update:modelValue 向上作为向上触发事件的事件名。

推荐阅读

👍《Vue3 过10种组件通讯方式》

👍《Vue3 - $attrs 的几种用法(1个或多个根元素、Options API 和 Composition API)》

👍《vite vue3 如何在 js 中使用 scss 变量?》

👍《Vue3 递归组件》

👍《Element Plus 的 el-icon 到底怎么用?》

👍《二次封装 el-icon》 点赞 + 关注 + 收藏 = 学会了