本文简介
点赞 + 关注 + 收藏 = 学会了
在使用第三方UI组件库时会发现可以在他们的组件上使用 v-model
,比如 Element-UI
或者 Element-plus
的 el-input
就可以使用 v-model
进行数据绑定。
本文就以 input
元素做例子,实现在自定义组件中使用 v-model
进行数据绑定。
我创建一个自定义组件,名字叫 z-input
,我希望在父组件可以使用 v-model
绑定数据,代码如下所示:
父组件中使用
<template>
<z-input v-model="msg" />
</template>
<!-- 省略js代码 -->
本文会分别使用 Vue 2
和 Vue 3.2
进行演示
Vue 2
你可以使用 vue-cli
脚手架创建项目,也可以使用 vite
创建 Vue 2
的项目。
如果还不了解如何使用 vite
创建 Vue 2
项目,可以跟着 《Vite 搭建 Vue2 项目(Vue2 + vue-router + vuex)》 进行操作。
例子
父组件
<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
传进来的值
但 “例子” 里的子组件 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 - $attrs 的几种用法(1个或多个根元素、Options API 和 Composition API)》
👍《vite vue3 如何在 js 中使用 scss 变量?》
👍《Element Plus 的 el-icon 到底怎么用?》
👍《二次封装 el-icon》 点赞 + 关注 + 收藏 = 学会了