#### 自定义组件中定义使用v-model
```html
<Component-A v-model="msg" />
```
### 在 vue2.x 中， 在自定义组件中
```javascript
{
props: {
myValue: {
type: String,
default: ''
}
},
model: {
prop: 'myValue',
event: 'update:myValue' // 自定义派发的事件名字, emit('update:myValue', newValue)
}
}
```
### 在vue3.x 版本中
```javascript
/*
在此组件内更新 modelValue 值的时候，
固定派发事件名称 update:modelValue
*/
{
props: {
modelValue: {
type: String, // 固定prop属性名字
default: ''
}
}
}
```
#### 自定义组件内部同样使用v-model了上面的 modelValue 的值,(自定义组件内部)
```html
<Component-B v-model="value" />
```
```javascript
{
props: {
modelValue: {
type: String, // 固定prop属性名字
default: ''
}
},
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value);
}
}
}
}
```
### 自定义组件定义多个v-model
```html
<Component-C
v-model:value="value"
v-model:title="title"
/>
```
```javascript
{
props: { // 在它们需要更新数据时候 派发事件 emit('update: propName', newValue)
value: {
type: String,
default: ''
},
title: {
type: String,
default: ''
}
}
}
```
---
#### 另一种效果类似v-model的
- 父组件中
```html
<Component-B :value.sync="msg" />
```
ComponentB:
```javascript
export default {
name: 'ComponentB',
props: {
value: {
type: String,
default: ''
}
}
// 当 value 属性的值要更新的时候
// this.$emit('update:msg': newValue) 即可
}
```
扫一扫
6034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
