How can I change data value from one component to another component in Vue Js?

Question

I am new in Vue Js. So, I am facing a problem to changes data value from another component.

I have a component A:

<template>
   <div id="app">
      <p v-on:click="test ()">Something</p>
   </div>
</template>

import B from '../components/B.vue';
export default {
    components: {
        B
    },
    methods: {
        test: function() {
            B.data().myData = 124
            B.data().isActive = true
            console.log(B.data().myData);
            console.log(B.data().isActive);
        }
    }
}

Component B:

export default {
    data() {
        return {
            myData: 123,
            isActive: false

        }
    }

}

It still component B data. But it cannot be affected component B data. I want to data changes of component B from component A. How can I do that?

Please explain me in details. I have seen vue js props attribute but I don't understand.

Answer 1

You're looking for Vuex.

It's the centralized store for all the data in your applications.

Take a look at their documentation, it should be pretty straightforward.

Answer 2

You can pass down props to the component B. These props can be updated by the parent component. You can think of B as a stupid component that just renders what the parent tells it to rendern. Example:

// Component A
<template>
   <div id="app">
      <p v-on:click="test ()">Something</p>
      <b data="myData" isActive="myIsActive"></b>
   </div>
</template>

<script>
import B from '../components/B.vue';
export default {
  components: {
    B
  },
  data() {
    return {
      myData: 0,
      myIsActive: false,
    };
  },
  methods: {
    test: function() {
      this.myData = 123
      this.myIsActive = true
    }
  }
}
</script>

// Component B
<template>
  <div>{{ data }}{{ isActive }}</div>
</template>

<script>
export default {
  props: {
    data: Number,
    isActive: Boolean
};
</script>