How to data bind from other component

Question

Hi I am new to vue and I am wondering how to data-bind from one component to another.

export default {
  name: 'dashboard-sidebar',
  methods: {
    monthChange: function (event) {
      var selectedMonth = $("#sel1").val();
      this.$root.$emit('changed', selectedMonth);

    },
    dashboardReportsChange(value){
      var selectedDashboard = value;
      this.$root.$emit('click', selectedDashboard);

    }
  }
}

I want to get the value of the variables I declare and data-bind it into another component in my app.

export default {
  components:{
    dashboardsidebar
  },
  mounted() {
    this.$root.$on('changed', (selectedMonth) => {
      console.log(selectedMonth);
    })
    this.$root.$on('click', (selectedDashboard) => {
      console.log(selectedDashboard)
    })

  }
}

This is my other component.

You can check vuex for state management vuex.vuejs.org

ittus
– ittus

2018-08-09 03:21:19 +00:00
Commented Aug 9, 2018 at 3:21 — ittus
– ittus, Commented Aug 9, 2018 at 3:21

tony19 · Accepted Answer · 2022-07-16 00:25:47Z

1

You can't bind data between components. What you can do;

You can use VueX, which is also what I would recommend.
If components have parent-child relation, you can use props.
Or you can use Events or a global EventBus and create methods for accessing the data in the specific component.

I hope this helps you somehow.

edited Jul 16, 2022 at 0:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 9, 2018 at 8:25

ValDaHus

3762 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to data bind from other component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related