Use a Vue JS component method in another vue comonent

Question

I have a two different vue component files, what should i do in order to use a changeCollection() method from Check-list.vue in another Component.vue file?

Check-lust.vue:

<template lang="html" ref="">
  <div class="check-list-view">
    <collections :current_collection="this.current_collection" ></collections>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current_collection: 'All'
    }
  },
  methods: {
    changeCollection (collname) {
      this.current_collection = collname
    }
  }
}
</script>

And Component.vue:

<template lang="html">
  <div class="container " style="margin-bottom:32px">
    <!-- NOT WORKS: -->
    <button type="button" name="button" class="btn my-btn-orange" @click="changeCollection('All')">All</button>
  </div>
</template>

<script>

export default {
  props: ['current_collection']
}
</script>

tony19 · Accepted Answer · 2022-07-15 21:09:33Z

5

Define a mixin.

mixin.js

export default {
  methods: {
    changeCollection(collname) {
      this.current_collection = collname
    }
  }
}

Check-lust.vue:

<template lang="html" ref="">
  <div class="check-list-view">
    <!-- changeCollection should be available here now -->
    <collections @click="changeCollection">hello world</collections>
  </div>
</template>
<script>
import mixin from './mixin.js' //import the mixin
export default {
  data () {
    return {
      current_collection: 'All'
    }
  },
  mixins:[mixin], // include the mixin in your component
  methods: {
    changeCollection (collname) {
      this.current_collection = collname
    }
  }
}
</script>

repeat the import of mixin.js on the rest of your components, and define mixins property on those as well.

ChangeCollection will be available on each component.

edited Jul 15, 2022 at 21:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 17, 2017 at 20:01

LiranC

2,4802 gold badges31 silver badges58 bronze badges

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

2 Comments

ramazan793 Over a year ago

Can I realize that without mixins, only using $refs ?

LiranC Over a year ago

that's absolutely not the use case of $refs

Collectives™ on Stack Overflow

Use a Vue JS component method in another vue comonent

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related