用Vue.js交替传递两个不同参数的Css工具按钮

<template>
  <button @click="toggleParams" :class="{'param1': isActive, 'param2': !isActive}">
    {{ isActive ? param1 : param2 }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      param1: '参数1',
      param2: '参数2'
    };
  },
  methods: {
    toggleParams() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.param1 {
  /* 样式参数1 */
}

.param2 {
  /* 样式参数2 */
}
</style>

<template>
  <div>
    <toggle-button></toggle-button>
    <toggle-button :param1="'自定义参数1'" :param2="'自定义参数2'"></toggle-button>
  </div>
</template>

<script>
import ToggleButton from './ToggleButton.vue';

export default {
  components: {
    ToggleButton
  }
};
</script>