在 Vuejs 应用程序中,当用户单击按钮时,我会弹出一个模式对话框。我需要将一个道具传递给这个模态组件。通常,我可以毫无困难地将道具传递给子组件。为什么这个案例不同?如果可以避免,我宁愿不在商店中存储任何数据。当模态打开时,prop collaboratorSelected 是一个空字符串,即它不注册父组件传递的新 prop 值,而是保持父组件挂载时设置的初始值。这个道具需要响应。
父组件...
<template>
<div>
<div v-for="collaborator in collaborators">
<a href="#" @click.prevent="showEditShare(collaborator)" class="dropdown-item">Edit</a>
</div>
<EditShare @editedShare="editedShare" :collaboratorSelected="collaboratorToEdit" ref="modal" ></EditShare>
</div>
</template>
<script>
import axios from "axios";
import store from "../store.js";
import EditShare from "@/components/EditShare";
import $ from "jquery";
export default {
name: "Share",
data() {
return {
collaboratorToEdit: "",
collaborators: ["1", "2", "3"]
};
},
components: {
EditShare
},
methods: {
showEditShare(collaborator) {
this.collaboratorToEdit = collaborator;
let element = $('#editShare');
$(element).modal('show');
}
}
</script>
子模态组件...
<template>
<form @submit.prevent="handleSubmit">
<div class="modal" tabindex="-1" role="dialog" id="editShare">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title card-title-bigger">Add Share</div>
{{collaboratorSelected}}
</div>
</div>
</div>
</div>
</form>
</template>
<script>
import axios from "axios";
import store from "../store.js";
import $ from "jquery";
export default {
name: "EditShare",
props: {
collaboratorSelected: String
},
</script>