参考
在写自定义组件时,有时候在子组件中改变值后需要同步修改到父组件中,此时使用v-model就很方便了
注意点
使用v-model传递给子组件的prop默认名称为value,事件默认为input,如果想要修改这两个默认值,可以使用model来重新指定,如上面的例子中,指定v-model传递给子组件的名称为msg,事件为change
父组件
<template>
<div>
{{ parentMsg }}
<modelTest v-model.sync="parentMsg"></modelTest>
</div>
</template>
<script>
import modelTest from './modelTest.vue'
export default {
components: {
modelTest
},
data() {
return {
parentMsg: ""
}
}
}
</script>
子组件
<template>
<div>
v-model
<el-select v-model="msgStr" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
props: {
msg: String
},
model: {
prop: 'msg',
event: 'input'
},
computed: {
msgStr: {
get() {
return this.msg
},
set(val) {
this.$emit("input", val);
},
}
},
data() {
return {
options: [
{ value: '黄金糕1', label: '黄金糕'},
{ value: '双皮奶2', label: '双皮奶'},
{ value: '蚵仔煎3', label: '蚵仔煎'},
{ value: '龙须面4', label: '龙须面'},
{ value: '北京烤鸭5', label: '北京烤鸭'},
],
}
},
}
</script>
