0

下面是简化的代码：

var theButton = {
  props: ["toggle"],
  methods: {
    click: function (event) {
      event.target.style.backgroundColor = this.toggle ? "blue" : "gray";
    }
  },
  template: `
<button v-on:click="click" v-on:mouseup="$emit('change')">ABC</button> 
`
}

var vm = new Vue({
  el: "#app",
  data: {
    toggle: true
  },
  components: {
    "the-button": theButton
  },
  template: `
<div>
  <the-button v-bind:toggle="toggle" 
              v-on:change="toggle = !toggle"></the-button>
</div>
`
});

我创建了一个只包含一个按钮元素的组件。单击它时，按钮背景颜色和绑定数据将被切换。

如您所见，我在按钮上设置了两个事件。一个click用于更改背景颜色的mouseup事件和一个用于更改绑定数据的事件。我不绑定两个click事件，否则会触发错误。

我想要实现的是创建一个click既可以更改背景颜色又可以设置父级新数据的事件。

顺便说一句，绑定数据可以是素数数据，例如String、Number或Boolean，直接覆盖那些数据不能改变父数据​​。

4

1 回答 1

0

您可以将发出事件的代码移动到您的点击处理程序中：

template: '<button v-on:click="click">ABC</button>'

...

methods: {
    click: function(event) {
      event.target.style.backgroundColor = this.toggle ? "blue" : "gray";
      this.$emit("change");
    }
  },
...

这是一个工作示例：https ://codesandbox.io/s/stack-overflow-q-57405469-upepg?module=/src/main.js

于 2019-08-08T08:34:35.763 回答