`如何在单个按钮上应用多个事件？`

Question

如何在 Vue.js 中的单个按钮上应用多个事件？

我只有一个按钮组件

当在 parent 中点击一个按钮时，有几个事件必须申请

标题应从 “购买”更改为“在篮子里”
图标应该应用完成
样式应更改为 button_1

我的按钮组件

<template>
  <div class="btn"
       @click="click"
       :class="className">
    <i class="material-icons"> {{ icon }} </i>

      <span> {{ title }} </span>

  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Buy'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    button_1: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
  },
  data() {
    return {}
  },
  computed: {
    className() {
      return {
        'btn__disabled': this.disabled,
        'btn__button_1': this.button_1,
      }
    }
  },
  methods: {
    click() {
      this.$emit('click')
    }
  },
  name: "BaseButton"
}
</script>

<style lang="scss" scoped>

.material-icons {
  font-size: 16px;
}
.btn {
  position: relative;
  font-family: 'Merriweather', sans-serif;
  color: var(--color-primary-light);
  left: 45%;
  bottom: 18%;
  height: 48px;
  width: 122px;
  cursor: pointer;
  background-color: var(--color-grey-light-4);
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  &:hover,
  &:active {
    background-color: var(--color-grey-light-2);
    border: none;
  }

  &__button_1 {
    color: var(--color-primary-light);
    background-color: var(--color-grey-light-3);
    border: none;
  }
  &__disabled {
    background-color: var(--color-grey-light-1);
    border: none;
    pointer-events: none;
  }
}
</style>

我的parent组件

<template>
<base-button @click="clickBtn"></base-button>
</template>

<script>
import BaseButton from '../components/ui/BaseButton'
export default {
  name: "GalleryOverview",
  components: {BaseButton},
    methods: {
      clickBtn() {
        console.log('BTN clicked')
      }
    }
  }
}
</script>

如何在单个按钮上应用多个事件？

Answer 1

你几乎完成了，因为你正在发送 emit 到父组件，你可以使用它来改变。

因此，首先您需要将所需的道具传递给子组件，如：

<template>
<base-button @click="clickBtn" :title="title" :icon="icon" :button_1="button_1"></base-button>
</template>

<script>
import BaseButton from '../components/ui/BaseButton'
export default {
  name: "GalleryOverview",
  data() {
    return {
      title: 'My Title',
      icon: '',
      button_1: false
    }
  }
  methods: {
    // This is where you can change.
    clickBtn() {
      this.icon = 'change icon';
      this.title = 'change title';
      this.button_1 = true;
    }
  }
}
</script>

现在，当您单击该按钮时，它会更改 title、icon 和 button_1。

`如何在单个按钮上应用多个事件？`

`How apply multiple event on single button?`

javascript

sass

vue.js

vue-component

vuejs2