vue2 组件v-model
vue2组件v-model
·
1. 默认情况
v-model="visible"
等价于 :value="visible"
加上 @input="visible = $event"
所以 v-model 就是父组件向子组件传了个 value 字段的值,子组件使用 props 定义 value 字段, 就可以在子组件使用 value 读取这个值;子组件使用
$emit('input',值) 就可以改变 v-model 的值。
父组件
<Chlid v-model="visible" />
<script>
export default {
data() {
return {
visible: true,
}
}
}
<script/>
子组件
<template>
<div v-show="value">
我是子组件文字
<button @click="$emit('input',false)">关闭</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false
}
},
}
</script>
2. 子组件改变默认字段名与事件
父组件
<Chlid v-model="visible" />
<script>
export default {
data() {
return {
visible: true,
}
}
}
<script/>
子组件
<template>
<div v-show="show">
我是子组件文字
<button @click="$emit('change',false)">关闭</button>
</div>
</template>
<script>
export default {
model: {
prop: "show",
event: "change",
},
props: {
show: {
type: Boolean,
default: false
}
},
}
</script>
子组件定义了以下代码就回改变默认字段
model: {
prop: "show",
event: "change",
}
此时,v-model="visible"
等价于 :show="visible"
加上 @change="visible = $event"
更多推荐
已为社区贡献1条内容
所有评论(0)