学习目录：

1. Vue.js 简介
2. Vue.js 实例与数据绑定
3. Vue.js 计算属性和侦听器
4. Vue.js 条件渲染和列表渲染
5. Vue.js 事件处理
6. Vue.js 表单输入绑定
7. Vue.js 组件基础
8. Vue.js 组件通信
9. Vue.js 插槽
10. Vue.js 动态组件和异步组件
11. Vue.js 自定义指令
12. Vue.js 过渡和动画
13. Vue.js 混入
14. Vue.js 自定义事件和 v-model
15. Vue.js 渲染函数和 JSX
16. Vue.js 插件
17. Vue.js 单文件组件
18. Vue.js Webpack 配置和打包优化
19. Vue.js Vue Router
20. Vue.js Vuex
21. Vue.js 服务端渲染
22. Vue.js 代码测试和调试
23. Vue.js 生态系统
24. Vue.js 最佳实践和性能优化
25. Vue.js 应用部署和上线

Vue.js 中的自定义事件

自定义事件是指开发者可以在 Vue.js 中定义自己的事件，用于组件之间的通信和交互。Vue.js 提供了 $emit 和 $on 方法来实现自定义事件。

$emit 方法

$emit 方法用于触发一个自定义事件，并传递参数。它的用法如下：

this.$emit(eventName, ...args)

其中，eventName 是要触发的事件名，...args 是要传递的参数。例如：

this.$emit('myEvent', arg1, arg2)

$on 方法

$on 方法用于监听一个自定义事件，并在事件触发时执行回调函数。它的用法如下：

this.$on(eventName, callback)

其中，eventName 是要监听的事件名，callback 是事件触发时要执行的回调函数。例如：

this.$on('myEvent', (arg1, arg2) => {
  // 处理事件
})

示例代码

下面是一个简单的自定义事件示例，包含一个父组件和一个子组件。父组件中定义了一个自定义事件 myEvent，并在子组件中触发该事件，同时传递一个参数。父组件监听 myEvent 事件，并在事件触发时弹出一个提示框，显示传递的参数。

<!-- 父组件 -->
<template>
  <div>
    <my-component @myEvent="handleMyEvent"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  methods: {
    handleMyEvent(arg) {
      alert(`接收到子组件传递的参数：${arg}`)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">触发自定义事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('myEvent', 'hello world')
    }
  }
}
</script>

Vue.js 中的 v-model

v-model 是 Vue.js 中的一个指令，用于实现表单元素的双向数据绑定。它的用法如下：

<input v-model="data">

其中，data 是要绑定的数据。v-model 指令会自动将表单元素的值与 data 进行双向绑定，即当表单元素的值发生变化时，data 也会相应地更新；当 data 的值发生变化时，表单元素的值也会相应地更新。

v-model 修饰符

v-model 还支持一些修饰符，用于实现更复杂的数据绑定需求。

.lazy 修饰符

.lazy 修饰符用于延迟数据更新，即当表单元素失去焦点或按下回车键时才更新数据。它的用法如下：

<input v-model.lazy="data">

.number 修饰符

.number 修饰符用于将输入的值转换为数值类型。它的用法如下：

<input v-model.number="data">

.trim 修饰符

.trim 修饰符用于去除输入值的首尾空格。它的用法如下：

<input v-model.trim="data">

示例代码

下面是一个简单的 v-model 示例，包含一个表单和一个显示框。表单中的输入框绑定了一个数据 text，同时使用了 .lazy 修饰符，使得当输入框失去焦点时才更新数据。显示框中使用了 {{}} 语法，将 text 数据显示在页面上。

<template>
  <div>
    <input v-model.lazy="text" type="text">
    <div>{{ text }}</div>
  </div>
</template>

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

综上所述，Vue.js 中的自定义事件和 v-model 非常实用，可以帮助我们更灵活地实现组件之间的通信和数据绑定。在实际开发中，我们可以根据具体需求灵活运用这些特性，提高开发效率和用户体验。