VueJS-事件

在VueJS中，事件是指与用户交互或数据变化相关的操作。VueJS提供了一系列的内置事件以及自定义事件，通过事件可以实现组件之间的通信和数据传递。

内置事件

VueJS提供了一些内置的事件，包括但不限于以下几种：

Click事件

Click事件是最常见的事件之一，它是当用户单击某个元素时触发的。VueJS的@click指令就是用来绑定Click事件的。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button is clicked')
    }
  }
}
</script>

Input事件

Input事件是当用户在文本框中输入内容时触发的事件。VueJS的v-model指令就是用来绑定Input事件的。

<template>
  <input v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

Change事件

Change事件是当某个表单控件的值改变并失去焦点时触发的事件，比如下拉框的选项改变。VueJS的@change指令就是用来绑定Change事件的。

<template>
  <select @change="handleChange">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      console.log('Selected option value is', event.target.value)
    }
  }
}
</script>

自定义事件

除了内置事件之外，VueJS还提供了自定义事件的机制。自定义事件是指用户自己定义的事件，可以用于组件之间的通信和数据传递。

组件之间传递数据

假设我们有两个组件A和B，A是父组件，B是子组件。现在我们要在B中修改A中的数据。这时候就需要使用自定义事件。

// A组件
<template>
  <div>
    <p>{{ message }}</p>
    <B @update-message="handleUpdateMessage" />
  </div>
</template>

<script>
import B from './B'

export default {
  components: { B },
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    handleUpdateMessage(value) {
      this.message = value
    }
  }
}
</script>

// B组件
<template>
  <div>
    <input v-model="message" />
    <button @click="handleClick">Update message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('update-message', this.message)
    }
  }
}
</script>

在B组件中，我们用了$emit方法来触发update-message事件，并把message的值作为参数传递。在A组件中，我们用了@update-message指令来绑定update-message事件，并把handleUpdateMessage函数作为回调函数，用来接收B传递过来的参数并更新A中的数据。

非父子组件之间传递数据

有时候，我们需要在非父子组件之间传递数据。这时候可以使用VueJS的事件总线机制。

// EventBus.js
import Vue from 'vue'

const eventBus = new Vue()

export default eventBus

// A组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Update message</button>
  </div>
</template>

<script>
import eventBus from './EventBus'

export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    handleClick() {
      eventBus.$emit('update-message', this.message)
    }
  }
}
</script>

// B组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import eventBus from './EventBus'

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    eventBus.$on('update-message', (value) => {
      this.message = value
    })
  }
}
</script>

在这个例子中，我们定义了一个EventBus实例，并在A组件中用它来触发update-message事件并传递数据，在B组件中监听update-message事件并接收A传递过来的数据来更新B中的数据。这样，我们就可以在任何两个组件之间传递数据了。

总结

VueJS的事件机制是非常强大和灵活的，可以满足各种交互操作和数据传递的需求。除了内置事件之外，VueJS还提供了自定义事件和事件总线机制，让我们能够实现非常高效的组件通信和数据传递。