#　やりたいこと
親から子のコンポーネントに値を渡したい。

やったこと

親

<template>
  <div>
    <b-button v-b-modal.modal-prevent-closing message="Hello Vue!!"
      >Open Modal</b-button
    >
    <ModalComponent />
  </div>
</template>

<script>
import ModalComponent from "@/components/Modal.vue";

export default {
  name: "ViewModal",
  components: {
    ModalComponent,
  },
  data() {
    return {
      reqUrl: "htto://localhost:8080/test",
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.chart-view {
  height: 450px;
  width: 450px;
}
</style>

子

<template>
  <b-modal
    id="modal-prevent-closing"
    ref="modal"
    title="Submit Your Name"
    @show="resetModal"
    @hidden="resetModal"
    @ok="handleOk"
  >
    <p>{{ message }}</p>
    <form ref="form" @submit.stop.prevent="handleSubmit">
      <b-form-group
        :state="nameState"
        label="Name"
        label-for="name-input"
        invalid-feedback="Name is required"
      >
        <b-form-input
          id="name-input"
          v-model="name"
          :state="nameState"
          required
        ></b-form-input>
      </b-form-group>
    </form>
  </b-modal>
</template>

<script>
export default {
  name: "ModalComponent",
  props: ["message"],
  data() {
    return {
      name: "",
      nameState: null,
      submittedNames: [],
    };
  },
  methods: {
    checkFormValidity() {
      const valid = this.$refs.form.checkValidity();
      this.nameState = valid;
      return valid;
    },
    resetModal() {
      this.name = "";
      this.nameState = null;
    },
    handleOk(bvModalEvt) {
      // Prevent modal from closing
      bvModalEvt.preventDefault();
      // Trigger submit handler
      this.handleSubmit();
    },
    handleSubmit() {
      // Exit when the form isn't valid
      if (!this.checkFormValidity()) {
        return;
      }
      // Push the name to submitted names
      this.submittedNames.push(this.name);

      console.log(this.submittedNames);
      console.log(this.reqUrl);
      // Hide the modal manually
      this.$nextTick(() => {
        this.$bvModal.hide("modal-prevent-closing");
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

事象

Messageに何も値が表示されず、エラー何も表示されないので、何が悪いのかがわかりません。

行動規範の内容に同意します

回答1件

propsは渡したコンポーネントに対して記述します。

diff
1<template>
2  <div>
3--     <b-button v-b-modal.modal-prevent-closing message="Hello Vue!!"
4++     <b-button b-b-modal.modal-prevent-closing
5      >Open Modal</b-button
6    >
7--     <ModalComponent />
8++     <ModalComponent message="Hello Vue!!" />
9  </div>
10</template>
11
12<script>
13import ModalComponent from "@/components/Modal.vue";
14
15export default {
16  name: "ViewModal",
17  components: {
18    ModalComponent,
19  },
20  data() {
21    return {
22      reqUrl: "htto://localhost:8080/test",
23    };
24  },
25  methods: {},
26};
27</script>
28
29<style lang="scss">
30.chart-view {
31  height: 450px;
32  width: 450px;
33}
34</style>