如何根据从子组件点击的按钮触发父组件中的模态?

Question

我有:

• panelHeader。值(子组件)
• 索引。vue(我的主列表视图是父)

---

panelHeader.vue

<template>
<v-row>
<div class="panelHeader">
<v-card>
<v-card-title>{{ name }}</v-card-title>
<v-card-subtitle>{{ subTitle }}</v-card-subtitle>
</v-card>
<v-btn @click="btnClicked"> Click </v-btn>
</div>
</v-row>
</template>
<script>
export default {
props: {
icon: String,
name: String,
subTitle: String
},
methods: {
btnClicked() {
this.$emit('btnClicked', true)
}
}
}
</script>

当点击，我想触发一个模态在我的主index.vue

所以我做了

<v-dialog @btnClicked="showModal" width="500px" class="d-flex justify-center">
<v-card>
<v-card-text> Any texts...</v-card-text>
</v-card>
</v-dialog>

这是错的吗?

@btnClicked="showModal"

Answer 1

你需要改变这里的一些东西:

<v-dialog v-if="showModal" @btnClicked="handleShowModal" width="500px" class="d-flex justify-center">
<v-card>
<v-card-text> Any texts...</v-card-text>
</v-card>
</v-dialog>
data() {
return {
showModal = false
}
}
methods: {
handleShowModal(e) {
this.showModal = e
}
}

Answer 2

观察:

• 在<child-component>元素而不是父元素<v-dialog>中捕获emit事件
• Emit事件名称应该用连字符分隔btn-clicked而不是camelCase
• v-dialog组件应该包含v-model指令/属性来分配发出的值。

Live Demo:

Vue.component('panelheader', {
props: ['name'],
template: `<div class="panelHeader">
<v-card>
<v-card-title>{{ name }}</v-card-title>
</v-card>
<v-btn @click="btnClicked"> Click </v-btn>
</div>`,
methods: {
btnClicked() {
this.$emit('btn-clicked', true)
}
}
});
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: function () {
return {
dialog: false,
panelName: 'Hello Vue'
}
},
methods: {
showModal(e) {
this.dialog = true;
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.2/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.0.2/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-dialog width="500px" v-model="dialog">
<v-card>
<v-card-text> Any texts...</v-card-text>
</v-card>
</v-dialog>
<panelheader v-on:btn-clicked="showModal" :name="panelName"></panelheader>
</v-app>
</div>