Vue - Accessing Attributes From One Component to Another

Question

New to vue and struggling to understand how data is passed back and forth between components. I'm aware of props and emit on the parent/child, child/parent, but I can't quite understand how they work in my case. I have two components: a parent component called "Letters" and a child called "ClaimantSearch". Claimant search return data about a person based on a call to a flask backend:

<div>
  <b-form @submit="onSubmit" class="w-100">
      <b-form-group id="form-title-group"
                    label="Claim Number:"
                    label-for="form-claim-number-input">
          <b-form-input id="form-claim-number-input"
                        type="text"
                        v-model="claimNumberForm.claimNumber"
                        required
                        placeholder="Enter claim number">
          </b-form-input>

          <button
              type="button"
              class="btn btn-warning btn-sm"
              @click="getClaimant(claimNumber)">
            Get Claimant
          </button>
        </b-form-group>
    </b-form>
    <span v-if="claimant">
      <p> {{ claimant.name }} </p>
      <p> {{ claimant.address1 }} </p>
      <p> {{ claimant.address2 }} </p>
      <p> {{ claimant.city }}, {{ claimant.state }} </p>
      <p> {{ claimant.zip }} </p>
    </span>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      claimant: '',
      claimNumberForm: {
        claimNumber: '',
      },
    };
  },
  methods: {
    getClaimant(number) {
      const path = `http://localhost:5000/claimant/${number}`;
      axios.get(path)
        .then((res) => {
          this.claimant = res.data.claimant;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
    onSubmit(evt) {
      evt.preventDefault();
      this.getClaimant(this.claimNumberForm.claimNumber);
    },
  },
};
</script>

I then have a Letters parent component:

<template>
  <div>
    <claimant></claimant>
  </div>
</template>

<script>
// import axios from 'axios';
import ClaimantSearch from './ClaimantSearch.vue';

export default {
  data() {
    return {
      claimant: '',
      claimNumberForm: {
        claimNumber: '',
      },
    };
  },
  components: {
    claimant: ClaimantSearch,
  },
  methods: {
  },
};
</script>

What I'd like to be able to do is access {{claimant}} outside of the <claimant> tag, if that makes sense. So inside Letters I'd like to do something like:

<template>
<div>
    <div>
      <claimant></claimant>
    </div>
    <div>
      Dear Mr. {{claimant.name}},

      Please get bent.  Sincerly, crappy insurance company.
    </div>
</div>
</template>

lmao, I really hope you work in insurance and are rebelling with this — Derek Pollard
Also, what you're looking for is global state - vuex is the best for it — Derek Pollard
great, i read about that but i wasn't sure if it was overkill for this use case. thanks. — ghiotion

ghiotion ghiotion · Accepted Answer · 2020-11-04T16:29:56

I can't remember exactly where I found this link, but there's an excellent post on medium, with code samples, that discusses all the state management patterns in vue starting with props and events, eventbus, simple store and then vuex.

https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87

Vue - Accessing Attributes From One Component to Another

1 Answers