javascript - 在另一个 vue 组件中使用 Vue JS 组件方法

Question

我有两个不同的 vue 组件文件，我应该怎么做才能在另一个 中使用 Check-list.vue 中的 changeCollection() 方法Component.vue 文件？

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>

和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>

Answer 1

Define a mixin.

mixin.js

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

检查-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>

在其余组件上重复导入 mixin.js，并在这些组件上也定义 mixins 属性。

ChangeCollection 将在每个组件上可用。