v-model模式 这种模式是Vue2.2之后提出的,父组件使用v-model指令与子代绑定数据speaks。
<template>
<doggie v-model="speaks" />
</template>
<script>
export default {
data: {
speaks: 'bark!'
}
}
</script>
同时,子组件要在props里面声明speaks。
<template>
<input :value="value" @input="$emit('input', $event.target.value)" />
</template>
export default {
props: ['value'],
}
并且子组件还要添加一个model
export default {
props: ['sound'],
model: {
prop: 'sound',
event: 'updateSound'
},
}
这样子组件触发updateSound就会同时改变父子组件的speaks变量。