如何将单击按钮的值发送到道具
如何将单击按钮的值发送到道具
提问于 2022-08-23 06:50:33
在我的父组件中，我有一个按钮和子组件：
<div> @click="editMe(edit)" />
<edit-team :openModal="openModal"/>
</div>
export default {
data() {
return {
openModal: false,
};
},
method: {
editMe(edit) {
this.openModal = true;
},
}
}因此，在单击editMe按钮后，我希望openModal变为真，并将其变为子组件。
<template>
<el-dialog
:visible.sync="modal"
/>
</template>
<script>
export default {
props: {
openModal: {
type: Boolean,
required: true,
},
},
data() {
return {
modal: this.openModal,
};
},
</script>但不幸的是，这种模式并没有开放，因为道具总是错误的。我将openModal分配给了新变量，因为它给了我关于变异道具的警告。你觉得我怎么才能以正确的价值送这些道具呢？
回答 2
Stack Overflow用户
发布于 2022-08-23 07:16:46
如果您有sibilngs组件，并且需要检索数据，可以使用emit关键字并发出事件。
然后它会像这样工作：
兄弟发出事件以显示模态true
- This
- ，父级将
showModalData更新为
子级，并重新呈现。
Vue.component('modal', {
template: '#modal',
props: ['show'],
});
Vue.component('buttonModal', {
template: '#buttonModal',
methods: {
showModal(){
this.$emit('show-modal-button', true)
}
}
});
new Vue({
el: '#app',
data: () => ({
showModalData: false
}),
methods: {
editMe() {
this.showModalData = true
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<p>this is the parent</p>
<hr>
<button-modal @show-modal-button="editMe">Show modal</button-modal>
<hr>
<modal :show="showModalData" />
</div>
<template id="modal">
<div>
props show : {{ show }}
<h2 v-if="show">This is the modal</h2>
</div>
</template>
<template id="buttonModal">
<div>
<p>This is the sibilng</p>
<button @click="showModal"> Show the modal through sibiling components </button>
</div>
</template>
Stack Overflow用户
发布于 2022-08-23 09:02:23
在孩子身上就试试这个
<template>
<el-dialog
:visible.sync="openModal"
/>
</template>
<script>
export default {
props: {
openModal: {
type: Boolean,
required: true,
},
},
},
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73454292
复制相关文章
相似问题
腾讯云开发者
