Vue——事件绑定

事件绑定

方法

v-on

可以简写成@

使用

两种方式

内联
直接把js写在标签上
调用方法
调用methods里定义的方法

事件修饰符

.stop
阻止单击事件冒泡
.prevent
提交事件不再重载页面
.capture
使用事件捕获模式
.self
当事件在该元素本身 (比如不是子元素) 触发时触发回调
.once

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

自定义事件

方法

 $on()
监听事件
$emit()
触发事件

思路

子组件（执行事件绑定）

1.
template标签内定义v-on事件，调用一个事件函数
2. methods里面设置事件函数，使用$emit( )触发事件（假设事件名叫做111）

父组件（执行事件监听）

1. 引入子组件
（import 自定义名字 from 子组件路径）
2. 创建components: {自定义名字}
3. tetemplate内定义v-on事件（<自定义名字 @111 = "事件函数"></自定义名字>
4. methods内，设置事件函数，使用 $on( )监听事件

实例

子组件
<template>
<button @click = 'addItem'>addItem</button>
</template>
data(){
return {
hello: 'I am a child'
}
}
mehtods{
addItem(){
//触发函数有2个参数，事件名称，数据
this.$emit('111', this.hello)
//这里把上面data的hello变量传过去父组件
}
}
父组件
<template>
<com-a @111 = 'addChild'>child
event</com-a>
</template>
<script>
import comA from '路径'
export default {
components: { comA }
}
methods: {
// 参数是子组件传过来的数据
addChild(childData){
console.log('我在父组件，接收子组件的参数' + childData )
}
}
</script>

表单事件绑定

方法

v-model

修饰符

.lazy
在 change 事件中同步
.number
自动将输入值转为Number类型，如果转换不了，返回原值
.trim
忽略空格

实例

文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

单选按钮

<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})

选择列表

动态

select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})

最后

以上就是悲凉毛豆最近收集整理的关于Vue——事件绑定的全部内容，更多相关Vue——事件绑定内容请搜索靠谱客的其他文章。