我计划并制作了一个模态,然后创建了一个按钮以关闭模态窗口。我想使用$ emit作为按钮事件来更改'isHomeDialog'的值。但是,$ emit的事件未传递到Home.vue
Home.vue
<template>
<div>
<ReviewDialog
:is-open="isHomeDialog"
@close="closeEvent()/>
</div>
</template>
<script>
import ReviewDialog from '@/components/popup/dialog/ReviewDialog';
</script>
export default {
name: 'Home',
components: {
ReviewDialog
},
data () {
return {
isHomeDialog: true
};
},
methods: {
closeEvent () {
console.log('close');
isHomeDialog = false;
}
}
};
BaseDialog.vue
<template>
<div v-show="isOpen">
<div class="mask"> </div>
<div class="content">
<button
class="close"
@click="$emit('close')"> </button>
<slot/>
</div>
</div>
</template>
<script>
export default {
props: {
isOpen: {
type: Boolean,
required: true
}
}
};
Reviewdialog.vue
<template>
<BaseDialog
url="@/components/popup/dialog/BaseDialog"
id="review-dialog"
:is-open="isOpen"
:header-text="'REVIEW'">
<div class="warp">
<p>
test
</p>
</div>
</BaseDialog>
</template>
<script>
import BaseDialog from '@/components/popup/dialog/BaseDialog';
export default {
components: {
BaseDialog
},
props: {
isOpen: {
type: Boolean,
default: false
}
}
</script>
首页└BaseDialog└ReviewDialog
在上述结构中,我尝试使用$ emit将请求发送到BaseDialog和ReviewDialog,但未将其传递到Home。除了向$ root。$ emit请求以外,是否有其他方法可以将$ emit发送到其父组件。
我计划并制作了一个模态,然后创建了一个按钮以关闭模态窗口。我想使用$ emit作为按钮事件来更改'isHomeDialog'的值。但是,$ emit的事件不是...
由于在Vue2中不推荐使用双向绑定,因此子代不能直接更改道具