学习目录：
- Vue.js 简介
- Vue.js 实例与数据绑定
- Vue.js 计算属性和侦听器
- Vue.js 条件渲染和列表渲染
- Vue.js 事件处理
- Vue.js 表单输入绑定
- Vue.js 组件基础
- Vue.js 组件通信
- Vue.js 插槽
- Vue.js 动态组件和异步组件
- Vue.js 自定义指令
- Vue.js 过渡和动画
- Vue.js 混入
- Vue.js 自定义事件和 v-model
- Vue.js 渲染函数和 JSX
- Vue.js 插件
- Vue.js 单文件组件
- Vue.js Webpack 配置和打包优化
- Vue.js Vue Router
- Vue.js Vuex
- Vue.js 服务端渲染
- Vue.js 代码测试和调试
- Vue.js 生态系统
- Vue.js 最佳实践和性能优化
- 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 非常实用，可以帮助我们更灵活地实现组件之间的通信和数据绑定。在实际开发中，我们可以根据具体需求灵活运用这些特性，提高开发效率和用户体验。
