vue2事件总结

Vue.js 2.0 提供了一些事件修饰符，用于更好的控制事件的行为。以下是 Vue2 事件修饰符的总结：

.stop

阻止事件冒泡

<div @click="outer">
  <div @click.stop="inner"></div>
</div>

.prevent

阻止默认行为

<a href="#" @click.prevent="onClick"></a>

.capture

使用事件捕获

<!-- 从外向内触发 -->
<div @click.capture="wrapper">
  <div @click="inner"></div>
</div>

.self

只有在事件触发元素自身时触发事件

<!-- 点击内部div元素不会触发事件，点击外部div元素会触发 -->
<div @click.self="wrapper">
  <div @click="inner"></div>
</div>

.once

只触发一次

<button @click.once="onClick"></button>

.passive

提高滚动性能，Chrome 内核的浏览器支持

<!-- 普通使用 -->
<div @touchmove="onTouchMove"></div>

<!-- 使用 .passive 修饰符 -->
<div @touchmove.passive="onTouchMove"></div>

组合使用

可以将多个修饰符组合在一起使用

<a href="#" @click.stop.prevent="onClick"></a>

以上是 Vue2 中常用的事件修饰符，可以帮助开发者更好地控制事件的行为。

Vue2组件传参方式有以下几种：

1. 父组件向子组件传递props

父组件通过v-bind或简写“:”绑定数据到子组件的props属性中，在子组件中就可以通过props对象获取传递过来的数据，从而在组件中使用这些数据。

1. 子组件向父组件传递事件

子组件通过$emit触发自定义事件，父组件通过v-on或简写“@”监听这个事件，从而执行相应的操作。

1. 父组件通过ref获取子组件的实例

父组件可以通过ref属性获取子组件的实例，从而调用子组件中的方法或访问子组件中的属性。

1. Vuex中的State

如果需要多个组件共享数据，可以使用Vuex中的状态管理来传递数据。

1. Provide / Inject

Provide / Inject 是 Vue 2.2.0 新增的一个 API，用于非父子关系组件之间的数据传递。通过 provide 在父组件中声明数据，再通过 inject 在子组件中注入这些数据。

总的来说，Vue2组件之间的参数传递方式多种多样，开发者可以根据具体的需求选择相应的方式。

Vue2的属性绑定可以分为三种：

1. 插值表达式：使用{{}}将表达式插入到HTML中。

<div>{{message}}</div>

1. v-bind指令：用于将DOM属性绑定到Vue实例中的数据。

<img v-bind:src="imageSrc">

1. 简写语法：v-bind指令可以使用简写语法(:)。

<img :src="imageSrc">

其中，属性绑定的值可以是Vue实例中的数据，也可以是调用Vue实例中的方法。

<div>{{fullName()}}</div>

Vue2中实现表单双向绑定需要用到v-model指令，可以将表单元素的值与Vue实例中的数据进行绑定。当表单元素的值发生改变时，Vue实例中的数据也会相应地更新；反之，当Vue实例中的数据发生变化时，表单元素的值也会随之更新。

以下是一些常见表单元素的双向绑定实现举例：

1. 文本框

<input type="text" v-model="message" />

1. 多行文本框

<textarea v-model="message"></textarea>

1. 单选框

<input type="radio" id="male" value="male

Vue2中实现表单双向绑定需要用到v-model指令，可以将表单元素的值与Vue实例中的数据进行绑定。当表单元素的值发生改变时，Vue实例中的数据也会相应地更新；反之，当Vue实例中的数据发生变化时，表单元素的值也会随之更新。

以下是一些常见表单元素的双向绑定实现举例：

1. 文本框

<input type="text" v-model="message" />

1. 多行文本框

<textarea v-model="message"></textarea>

1. 单选框

<input type="radio" id="male" value="male" v-model="gender" />
<label for="male">Male</label>

<input type="radio" id="female" value="female" v-model="gender" />
<label for="female">Female</label>

1. 复选框

<input type="checkbox" id="agree" v-model="isAgree" />
<label for="agree">I agree to the terms and conditions</label>

1. 下拉框

<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

其中，v-model指令后面的数据属性可以是Vue实例中已经存在的数据属性，也可以是新定义的数据属性。通过双向绑定，表单元素的值可以实时反映到数据属性中，从而实现数据的实时更新。