Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件
在Vue中，通过v-on 来监听DOM事件，可以通过@简写代替。
一个简单的在组件中的事件调用示例
- 在template的Html中使用v-on或@监听一个click事件，并指定事件执行handleClick方法。
- handleClick需要在组件的methods集合中定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list></todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<todo-item v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
list: [
{
title: "新课程1",
del: false
},
{
title: "新课程2",
del: true
},
{
title: "新课程3",
del: false
}
]
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">删除</button>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("点击删除按钮！");
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>
效果如下
组件的事件调用如何触发上级节点的事件？通过$emit来触发。
this.$emit('自定义事件名',参数);//参数如有多个，可以用逗号隔开继续增加，如this.$emit('自定义事件名',参数1,参数2)
示例：组件todo-item上的事件，继续触发父组件todo-list上的自定义事件。
- 在事件方法handleClick中通过$emit继续触发父组件自定义事件。并传入参数title
this.$emit('delete',this.title);
- 在父组件todo-list的template中的html中监听自定义事件@delete="handleDelete"或v-on:delete="handleDelete"
- 在父组件件todo-list的methods定义handleDelete方法(带参数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list></todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<todo-item @delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
list: [
{
title: "新课程1",
del: false
},
{
title: "新课程2",
del: true
},
{
title: "新课程3",
del: false
}
]
};
},
methods:{
handleDelete(vtitle){
console.log("删除工程！",vtitle)
}
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">删除</button>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("点击删除按钮！");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>
Vue事件还提供了大量的事件修饰符
- .stop
- .prevent
- ....
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
Vue事件还提供大量的按键修饰符
如常用的回车提交
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
