父组件:
<template>
<v-btn v-on:click="dialog = !dialog">
</v-btn>
</template
<script>
export default {
data: () => ({
dialog: false
}
</script
子组件:
<template>
<v-layout>
<v-dialog v-model="toggledialog">
<v-btn color="green darken-1" flat="flat"
@click.native="toggledialog = false">Close</v-btn>
</v-dialog>
</v-layout>
</template>
<script>
export default {
data: () => ({
toggledialog: false,
}),
watch: {
dialog: function(){
this.toggledialog = true
},
},
props:['dialog']
}
</script>
此代码有效,但我真的不喜欢watch
的这种解决方法。
问题:
v-model="toggledialog"
没有注意到props:['dialog']
,如何在子组件中打开对话框?dialog
中更改父组件时如何将false
更改为v-model="dialog"
?答案 0 :(得分:1)
将value
道具value
传递给v-dialog
,并在您想要关闭它时重新发出输入v-dialog
:
//CustomDialog.vue
<v-dialog :value="value" @input="$emit('input')">
<v-btn color="green darken-1" flat="flat"
@click.native="$emit('input')"
>Close</v-btn>
</v-dialog>
...
props:['value']
并将v-model添加到您的父级
//Parent.vue
<custom-dialog v-model="dialog">
所以没有data
而没有watch